语义UI与React一起形成

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

componentDidMount您可以简单地为元素创建一个处理程序,而不是使用jQuery选择器和生命周期钩子引入验证,当有可用引用时将调用该处理程序.

考虑从LinkedStateMixin迁移

关于LinkedState的官方消息:

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

将此与mixins引入含糊不清的事实相结合,将来可能会被弃用.

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的依赖性,并且在自己处理更改事件时可以提供更大的灵活性.

这是一篇有趣的文章,介绍了如何使用继承来解决有关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 - 将验证规则外包给验证器

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

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