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