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

Question

我阅读了这个问题的答案，但 none 与我的设置相似：

我有一个父组件和许多子组件作为输入。每个输入都有一个 defaultValue，它是使用从父级接收的 prop 设置的，并且输入的验证是在 onBlur 上执行的。这是因为验证是异步的，所以 onChange 会疯狂地降低应用程序的速度。

这个配器是怎么调用的？ "controlled" 的传统定义似乎是一个在每个 onChange 上更新的输入，而 "uncontrolled" 输入是管理其自身内部状态的输入，稍后可通过 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 组件？

Is this a controlled or uncontrolled React component?

javascript

input

reactjs

controlled-component