Reactjs 验证反应

如果没有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);
}

然后，错误将作为

---

有什么想法吗？提前感谢您……

我将使用以下方法：

（1） 给定一个输入组件，附加一个

onChange

事件处理程序

（2） 在

onChange

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

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

您可以使用

event.target.value

、

event.target.name

等来获取有关目标字段的信息

onAddHistory

方法中的if语句似乎有点复杂。请记住，当您要更改组件的状态时，始终需要创建一个新对象，并使用

setState（）

将其替换到现有状态之上。换句话说，你不应该直接改变这个.state

某种形式的组件示例（只是一个片段，不是全部）：

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

onFruitChange=（事件）=>{
设错误=null；
//验证（使用辅助验证函数重构）
如果（event.target.value==''）{
//给定值为空，但该字段为必填字段
错误=`${event.target.name}是必填字段`；
}
否则如果（event.target.value.length<3）{
//给定值必须至少为3个字符
错误=`${event.target.name}必须至少包含3个字符'；
}
//否则，如果…其他验证条件
this.setState（{fruit:event.target.value，fruitError:error}）；
}
render（）{
返回(
// ...
)
}

---

在上面的示例中，

this.state.fruitError

将指示您是否存在验证错误（其值是错误描述）。

除了redux表单之外，还有许多方法可以进行验证。您有什么具体问题？我在哪里传递isValid，它是否传递到onAddHistory？您在哪里调用

isValid

取决于事物的结构；我想不会，因为这看起来是在处理来自Ajax调用的响应，例如，在表单提交之后。问题是，它可能会在有意义之前提供反馈，如果表单没有设置为输入特定的错误消息（例如，错误在顶部）一旦改变就这么做是不成熟的。不是不同意一般的想法，只是它不适用于所有场景。（您可能需要消除任何Ajax验证的影响，尽管这似乎与本文无关。）哦，我只是认为他想要这样的验证。onChange只有在触摸（更改）表单字段后才会触发。要验证整个表单，您必须再次查看每个字段。如果只想在单击提交后进行验证，那么我认为这会容易得多。只需检查所有存储的值，看看它是否有效。