React 的语义 UI 形式

Question

我正在使用语义 UI 结合 ES6 JS 中的 React 构建一个简单的登录表单。下面的代码按预期运行。我想知道我是否以正确的方式做事并遵循 React 约定：

constructor(props) {
    super(props);

    // this is getInitialState()
    this.state = {
      emailaddress: '',
      password: '',
      errors: ''
    };
}

componentDidMount() {
    $('.ui.form').form({
        fields: {
            email: {
                identifier  : 'emailaddress',
                rules: [
                {
                    type   : 'empty',
                    prompt : 'Please enter your e-mail'
                },
                {
                    type   : 'email',
                    prompt : 'Please enter a valid e-mail'
                }
                ]
            },
            password: {
                identifier  : 'password',
                rules: [
                {
                    type   : 'empty',
                    prompt : 'Please enter your password'
                },
                {
                    type   : 'length[6]',
                    prompt : 'Your password must be at least 6 characters'
                }
                ]
            }
        },
        inline: true,
        onFailure: this.handleInvalidForm.bind(this),
        onSuccess: this.handleValidForm.bind(this)
    });
}

login() {
    // Make call to auth service which will redirect on success or throw an error here if it fails
}

handleInvalidForm(e) {
    this.setState({errors : e});
    return false;
}

handleValidForm(e) {
    e.preventDefault();
    this.login();
}

render() { 
    return (
        <form className="ui large form" >
            <input type="text" valueLink={this.linkState('emailaddress')} name="emailaddress" placeholder="E-mail address"/>
            <input type="password" valueLink={this.linkState('password')} name="password" placeholder="Password"/>
            <div className="ui fluid big green submit button">Login</div>
        </form>
)

ReactMixin(Login.prototype, React.addons.LinkedStateMixin);

目前验证错误设置为在线发生。这意味着插件将代码注入 DOM。这不是我在 React 中的状态字典的一部分。这是个问题吗？

Answer 1

您应该将 ref 添加到您呈现的表单，而不是使用 jQuery 到 select componentDidMount 中的表单，而是使用 ref。如果可以，请避免直接进入 DOM。

Answer 2

我猜 React 惯例是不使用像 Semantic UI 这样的库，它使用 jQuery 来处理组件状态和更新。

但是，有时您必须与第三方库集成，因此我们假设以上不是一个选项。

第三方DOM

看起来语义 UI 形式的验证 API 不会让您拦截错误 — 它们只是直接进入 DOM。在这种情况下，做任何事情都是麻烦多于它的价值。

使用引用

接下来要看的是获取对 .ui.form 的引用的方式。可以将 ref 属性与回调一起使用，以更传统的方式获取元素。

addValidation(element) {
  const $element = $(element);
  $element.form({
    // ...
  });
},
render() { 
  return (
    <form className="ui large form" ref={this.addValidation}>
      <input type="text" valueLink={this.linkState('emailaddress')} name="emailaddress" placeholder="E-mail address"/>
      <input type="password" valueLink={this.linkState('password')} name="password" placeholder="Password"/>
      <div className="ui fluid big green submit button">Login</div>
    </form>
  )
)

无需使用 jQuery 选择器和 componentDidMount 生命周期挂钩来引入验证，您可以简单地为元素创建一个处理程序，当有可用引用时将调用该处理程序。

考虑从 LinkedStateMixin 迁移

The official word on LinkedState:

If you're new to the framework, note that ReactLink is not needed for most applications and should be used cautiously.

将此与 mixins introduce ambiguity 结合起来，将来可能会被弃用。

changeEmail(event) {
  const { value: emailaddress } = event.target;
  this.setState({ emailaddress });
}
changePassword(event) {
  const { value: password } = event.target;
  this.setState({ password });
}
render() { 
  return (
    <form className="ui large form" ref={addValidation}>
      <input type="text" onChange={changeEmail} name="emailaddress" placeholder="E-mail address"/>
      <input type="password" onChange={changePassword} name="password" placeholder="Password"/>
      <div className="ui fluid big green submit button">Login</div>
    </form>
  )
)

这种方法不会引入太多新代码，它消除了您对 LinkedStateMixin 的依赖，并且在您自己处理更改事件时为您提供了更大的灵活性。

这里 interesting article 介绍了如何使用继承来解决与混入有关的一些问题。特别重要的是最后关于从 PureComponent 继承而不是使用 PureRenderMixin 的讨论。这可能是一种从代码中删除所有混合依赖项的方法。

使用静态属性

假设您不打算在表单中动态生成字段，您可以将验证规则从生命周期钩子中拉出来，并将它们移动到静态变量中，在组件的所有实例之间共享。

class YourComponent extends React.Component {
  // ...
  addValidation(element) {
    const $element = $(element);
    $element.form({
      // ...
      fields: YourComponent.validationFields,
      inline: true,
      onFailure: this.handleInvalidForm.bind(this),
      onSuccess: this.handleValidForm.bind(this)
    });
  },
}

YourComponent.validationFields = {
  email: {
    // ...
  },
  password: {
    // ...
  }
}

无需为组件的每个实例定义一次。如果需要，您甚至可以将其拉出到自己的模块或 JSON 文件中。

结论

总的来说，这些变化并不大。如果您使用的第三方库已经对如何与 DOM 进行交互有意见，那么它永远不会与您的 React 代码无缝运行。

有一些 React 库也解决了这个问题，只是让你知道。

formsy-react - 创建开箱即用的可验证表单
react-validation - Outsource validation rules to validator

这两个库都以更惯用的方式解决了同一个问题，并且都提供了示例。但是，它们不会为您提供 Semantic UI 提供的样式和布局。

也许一个好的折中方案是包含 Semantic 的样式表，而不是它的 Javascript 库。然后您可以使用适当的 class 名称来获取样式，而是使用 React 库来验证您的表单。

React 的语义 UI 形式

Semantic UI forms with React

reactjs

semantic-ui

第三方DOM

使用引用

考虑从 LinkedStateMixin 迁移

使用静态属性

结论