这是一个受控还是不受控的 React 组件？答案

【问题标题】：Is this a controlled or uncontrolled React component?这是一个受控还是不受控的 React 组件？
【发布时间】：2020-03-30 22:40:21
【问题描述】：

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

What are controlled components and uncontrolled components?

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

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

更新：这是CodeSandbox。

【问题讨论】：

发布一些实际代码供我们查看会对您有所帮助。但从根本上说，“受控”只是意味着 React 将表单的状态存储在 state 中，并且 HTML 是基于此呈现的。 “不受控制”意味着表单值不存储在 React 状态中，而仅存储在 DOM 本身中，这是不好的，因为 React 应该是值的“真实来源”。您的 onChange 处理程序是否同步无关紧要。 reactjs.org/docs/uncontrolled-components.html
感谢您的评论，@jered。我用 CodeSandbox 的链接更新了问题。

标签： javascript reactjs input controlled-component

【解决方案1】：

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

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

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

【讨论】：

谢谢，看。不幸的是，我以前也这样做过，但我的应用程序仍然非常非常慢。
好的，所以性能问题是另一回事。无论如何，异步调用都不应该减慢速度，因为它们是异步的。你是说应用程序很慢吗？
查看了代码 - 所以我现在更了解你了。同意 onBlur 可能是在这种情况下验证的最佳场所。但这与您的问题的不受控制或受控制的输入有关。
我知道，所以也许我根本不应该在问题中提到验证。对此感到抱歉。所以，归根结底，这是一个不受控制的输入，因为它管理自己的状态，直到 onBlur 在稍后阶段被触发？
它实际上与 onBlur 无关 - 验证是关于输入状态的信息，而不是状态本身。输入不受控制，因为您没有value 到state 的绑定，onChange 更新状态。这就是“受控”的意思。