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);

目前，验证错误设置为内联。这意味着插件将代码注入DOM。这不是我在React中的州词典的一部分。这是一个问题吗？

Answer 1

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

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

第三方DOM

看起来语义UI表单的验证API不会让您拦截错误 - 它们只是直接进入DOM。在这种情况下，对它采取任何措施都比它的价值更麻烦。

使用Refs

接下来要看的是.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：

如果您是该框架的新手，请注意大多数应用程序不需要ReactLink，应谨慎使用。

将此与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关于如何使用继承来解决有关mixin的一些问题的问题。特别重要的是最后讨论从PureComponent继承而不是使用PureRenderMixin。这可能是一种从代码中删除所有mixin依赖项的方法。

使用静态属性

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

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

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

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

Answer 2

您应该在呈现的表单中添加ref，而不是使用jQuery在componentDidMount中选择表单，而是使用ref。如果可以，请避免直接直接访问DOM。

语义UI与React一起形成

2 个答案:

第三方DOM

使用Refs

考虑从LinkedStateMixin迁移

使用静态属性

结论