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）在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

React

1 个答案: