Question

我正在尝试使用react-validation在React中进行简单的表单验证。我了解如何根据我的需要验证字段，但我不明白的是，当用户尝试提交表单时，如何获取表单的“状态”。

文档说Form组件提供了4种公共方法： validate（name），validateAll（），showError（component [，error]），hideError（component）

据我所知，这些方法可以通过参考Form组件来访问：

<Form ref={c => { this.form = c }} onSubmit={this.handleSubmit.bind(this)}>

当我在我的提交处理程序中控制log.form时，我确实得到了一个带有上述方法的对象，但当我调用其中一个时，如validateAll（），它返回undefined。我不明白为什么。

有人可以帮助我使用这个特定的插件，或者推荐一个不同的简单替代方案吗？我需要执行非常基本的验证（但不能使用内置的HTML），并且不需要像react-form或redux-form这样的东西（我甚至不在此项目中使用Redux）

Answer 1

我已在沙箱中查看过，请查看，

我可以告诉你它以这种方式工作。当您调用this.form.validateAll()时，它返回undefined但它会执行所有验证函数并附加以形成在该函数中定义的错误消息。因此，甚至可能无需validateAll返回smth

我发现提供state.isValid的解决方案。在表单更改

上设置isValid = true

handleChange() {
  this.setState({ isValid: true });
}

并且在每个验证器集state.isValid = false中，如果验证未通过