我有一个表单，它使用各种类型的问题字段（例如文本输入、电子邮件、数字、单选框、标签、自定义输入）填充。这些字段类型是基于用户在先前表单上的先前选择而动态获取的。
现在，当用户使用 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 中执行此操作的正确方法是什么。
您正在将 jQuery（和 vanilla JS）思维模式应用于 React。我建议停止考虑您拥有任何形式的 DOM。没有 DOM，也没有组件列表，不要接触它，否则 React 将是一种痛苦而不是帮助。
您想要拥有的所有数据都必须处于状态。这就是这个图书馆的目的。
所以，在你的情况下，最好这样做：
1）onChange在Question和其他字段组件中实现事件。不管它们有多复杂，您都可以将它们的数据流式传输到单参数中，不是吗？
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
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句