验证反应

Question

如果没有reduxForm，我将如何使用此验证。 我知道如何使用reduxForm，但我上面的人想要在没有ReduxForm的情况下构建。那么关于如何实现这一点的任何想法？

onAddHistory = (field) => (response, index, value) => {
  const { history } = this.state;
  console.log(this.state);
  if (field === 'employerName' || field === 'description') {
    history[field] = response.target.value;
  } else if (field === 'roles') {
    history[field] = value;
  } else {
    history[field] = response.value;
  }
  this.setState({
    history: this.state.history,
  }
 }

isValid = () => {
  const errors = {};
  const regex = ***** to long to post

  if (!history.employerName || Validator.isNull(history.employerName)) 
   {errors.employerName = translations.translate('common', 
   'thisFieldIsRequired');}

this.setState({
  errors,
});

  return isEmpty(errors);
}

然后错误会传递到字段中 有任何想法吗？提前谢谢你......

Answer 1

我会使用以下方法：

（1）给定输入组件，附加onChange事件处理程序

（2）在onChange事件处理程序的定义中，将您的字段信息（例如名称，值等）传递给某些验证方法。

（3）从验证方法的输出中确定验证错误并将其存储在某处（例如组件状态）。

您可以使用event.target.value，event.target.name等获取有关目标字段的信息。

onAddHistory方法中的if语句似乎有点复杂。请记住，当您想要更改组件的状态时，始终需要创建一个新对象，并使用setState()将其替换为现有状态。换句话说，你不应该直接改变this.state。

SomeForm组件示例（只是一个代码段，而不是整个内容）：

onFruitChange = (event) => {
  let error = null;

  // Validations (refactor with a helper validation function)
  if (event.target.value === '') {
    // Given value was blank, but the field is required
    error = `${event.target.name} is a required field`;
  }
  else if (event.target.value.length < 3) {
    // Given value must be at least 3 characters
    error = `${event.target.name} must contain at least 3 characters';
  }
  // else if ... other validation conditions

  this.setState({ fruit: event.target.value, fruitError: error });
}

render() {
  return (
    // ...
    <input type="text" name="fruit" value={this.state.fruit} onChange={this.onFruitChange} />
  )
}

在上面的示例中，this.state.fruitError将指示您是否有验证错误（其值是错误说明）。