Question

一些material-ui组件有errorText作为prop我们可以用它来显示错误，但是，如果我的表单有大量的字段组件，那么做反应变得很复杂。

请建议使用material-ui组件处理客户端验证的最佳方法。

Answer 1

我认为你的问题是你需要管理很多州/商店。由于单向绑定，反应验证很复杂。

我发现这个库https://github.com/vishalvisd/react-validator支持material-ui组件验证。虽然通常您可以使用它来验证任何组件。

Answer 2

我建议使用一些HoC（高阶分量）方法。我在React JS中测试了许多用于表单验证的解决方案，我总是选择它：react-validation-mixin。看一下这个example。

标准输入示例：

<input
  type='text'
  placeholder='Username'
  value={this.props.username}
  onChange={this.onChange('username')}
  onBlur={this.props.handleValidation('username')}
/>

在此示例中，value的输入来自props（使用Flux实现的示例），这可能也是您的目标（大量输入）。 onChange需要处理值更改，以便this.props.username也得到更新，onBlur将触发验证检查（以便在用户离开输入时错误显示）。

要获取错误消息，请使用：this.props.getValidationMessages('username')

这是一个通用解决方案，您可以在不同的库中使用它。但是，正如您所问的那样，从TextField开始material-ui：

<TextField
  floatingLabelText="Username"
  value={this.props.username}
  errorText={this.props.getValidationMessages('username')}
  onChange={this.onChange('username')}
  onBlur={this.props.handleValidation('username')}
  ...
/>

请记住将HoC与您的组件一起使用：export default validation(strategy)(UserLogin)这样，您将获得props中所有必要的辅助方法。

Answer 3

如果您在React项目中使用Redux，redux-form为您提供了一种实现表单验证的简单方法。

检查出来：http://redux-form.com/6.4.3/examples/syncValidation/

使用material-ui组件进行客户端验证

3 个答案: