React 中自定义字段的自定义验证

Question

我有一个表单，它使用各种类型的问题字段（例如文本输入、电子邮件、数字、单选框、标签、自定义输入）填充。 这些字段类型是基于用户在先前表单上的先前选择而动态获取的。

现在，当用户使用 React 提交表单时，我必须验证不同的表单字段。 问题是我不能简单地检查字段的value属性，因为有些字段很复杂，我们在应用一些计算、替换非数字后才能得到值，或者有些字段可能有单选按钮和相应的文本输入等. 我怎样才能在 React 中进行这个验证？ 我的一般结构是这样的：

<form>
  { this.props.questions.map((question, index) => {
    return <Question key={index} data={question} validationError={this.state.validationErrors[question.name]} />
  })}
</form>
<button onClick={this.validateFields}>Submit</button>

是否可以在该组件类的validateFields方法中遍历组件？ 或者我需要遍历在最终 HTML 中呈现的 html 节点？ 早些时候，我使用 jQuery 执行此操作，并遍历问题 div 元素并根据问题类型（存储在数据属性中）应用自定义验证规则。

现在，我不确定在 React 中执行此操作的正确方法是什么。

Answer 1

您正在将 jQuery（和 vanilla JS）思维模式应用于 React。 我建议停止考虑您拥有任何形式的 DOM。 没有 DOM，也没有组件列表，不要接触它，否则 React 将是一种痛苦而不是帮助。

您想要拥有的所有数据都必须处于状态。 这就是这个图书馆的目的。

所以，在你的情况下，最好这样做：

1) 在Question等字段组件中实现onChange事件。 不管它们有多复杂，您都可以将它们的数据流式传输到单参数中，不是吗？

2）在您的表单中添加onChange处理程序，例如

onChange={value => 
    this.setState({ 
        fieldValues: { 
            [index]: value 
        }
    })
}

3) 像这样填充fieldValues ：

constructor(props) {
    super(props);
    this.state = {
        fieldValues: props.questions,
    };
}

瞧——所有的表单数据都已经在this.state.fieldValues ，可以随时使用。

惊讶？ 所以，当我第一次理解 React 中的用户输入时。 查看 React 文档中的这一部分以了解该想法的来源： https : //reactjs.org/docs/forms.html#controlled-components

Answer 2

您可以在这里找到复杂的示例https://medium.com/@krzakmarek88/complex-form-validation-in-react-hooks-cb07367196b9也许会对您有所帮助。