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

What are controlled components and uncontrolled components?

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

该业务流程如何称呼?传统的“受控”定义似乎是在每个onChange上更新的输入,而“非受控”输入则是管理其自身内部状态的输入,该内部状态随后可通过ref访问。我的设置似乎都没有,都坐在中间的某个地方-还是不?

更新:这是CodeSandbox

最佳答案

如果我正确理解了您的设置,则您的输入将不受控制,因为它们的状态保存在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可以是异步的,并且在验证失败时可以执行所需的任何操作。那将是一个受控组件,可以执行您想要的操作。

08-06 02:39