这是受控的还是非受控的 React 组件？

Question

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

什么是受控组件和非受控组件？

我有一个父组件和许多子组件作为输入。 每个输入都有一个defaultValue ，它使用从父级收到的 prop 设置，输入的验证在onBlur上执行。 这是因为验证是异步的，所以onChange会像疯了一样减慢应用程序。

这个编排是如何命名的？ “受控”的传统定义似乎是在每个onChange上更新的输入，而“不受控制”的输入是管理自己内部状态的输入，稍后可以通过 ref 访问该状态。 我的设置似乎两者都没有，坐在中间的某个地方 - 或者不是？

更新：这是一个CodeSandbox 。

Answer 1

如果我正确理解你的设置，你的输入是不受控制的，因为它们的状态保存在 DOM 中而不是 React 状态中。 验证是一个单独的问题，可以同步或异步发生。 无论您为验证做什么，您都可以让 React 状态保存值。 请注意，大多数情况下，您甚至不想阻止输入具有无效值 - 您只想确保用户无法在值无效时提交表单。 因此，您可以使用onChange处理程序在 state 上设置一些值，如下所示：

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

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