Question

我阅读了有关此问题的答案，但没有一个与我的设置类似：

What are controlled components and uncontrolled components?

我有一个父级组件和多个子级作为输入。每个输入都有一个defaultValue，该值是使用从父级接收到的prop设置的，并且对onBlur的输入进行验证。这是因为验证是异步的，因此onChange会使应用程序变疯狂。

该业务流程如何命名？传统的“受控”定义似乎是在每个onChange上更新的输入，而“非受控”输入是管理其自身内部状态的输入，该内部状态随后可通过ref访问。我的设置似乎没有达到两者的要求，坐在中间的某个地方-还是没有？

更新：这是一个CodeSandbox。

Answer 1

如果我正确理解您的设置，则您的输入将不受控制，因为它们的状态保存在DOM中，而不是React状态。验证是一个单独的问题，可以同步或异步发生。您可以让React state保留值以进行验证。请注意，大多数时候您都不想阻止输入甚至包含无效值-您只想确保在值无效时用户不能提交表单。因此，您可以使用onChange处理程序来设置状态的某些值，如下所示：

<input type="text" 
  value={this.state.myValue} 
  onChange={val => this.setState({myValue: val}, 
    ()=> this validateMyValue(this.state.myValue))}} />

this.validateMyValue可以是异步的，并且在验证失败时可以执行所需的任何操作。那将是一个受控组件，可以执行您想要的操作。

这是受控还是不受控制的React组件？

1 个答案: