reactjs - 使用 React 构建语义 UI 表单

Question

我正在使用 Semantic 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);

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

Answer 1

我猜 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 生命周期 Hook 引入验证。

考虑从 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 的依赖，并且在您自己处理更改事件时为您提供了更大的灵 active 。

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

使用静态属性

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

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 - 将验证规则外包给validator

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

也许一个好的中间立场是包含 Semantic 的样式表，但不包含它的 Javascript 库。然后，您可以使用适当的类名来获取样式，而是使用 React 库来验证表单。