1

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

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

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

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

更新：这是一个CodeSandbox。

4

1 回答 1

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可以是异步的，并且在验证失败时执行所需的任何操作。那将是一个受控组件，可以做你想做的事。

于 2019-12-05T23:44:11.853 回答