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

IT技术 javascript reactjs input controlled-component
2021-04-30 05:14:32

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

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

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

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

更新:这是一个CodeSandbox

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