javascript - 这是受控还是不受控的 React 组件?

标签 javascript reactjs input controlled-component

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

What are controlled components and uncontrolled components?

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

这个编排是如何命名的? “受控”的传统定义似乎是在每次 onChange 上更新的输入,而“不受控”输入是管理其自身内部状态的输入,稍后通过引用访问该状态。我的设置似乎两者都不够,位于中间的某个位置 - 或者不是?

更新:这是 CodeSandbox .

最佳答案

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

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

this.validateMyValue 可以是异步的,并在验证失败时执行所需的操作。那将是一个受控组件,可以执行您想要的操作。

关于javascript - 这是受控还是不受控的 React 组件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59204630/

相关文章:

javascript - 在 &lt;input&gt; 中动态添加 <div>

javascript - 通过 JavaScript 提交表单

php - 使用 JS slider 显示来自电子商店 API 的产品的可嵌入小部件

javascript - ParserError : Expected pragma, import directive or contract/interface/library definition

javascript - 在 React 组件中检索自定义数据-* 属性值(无事件)

reactjs - React Hook 形式 - 填充选择多个选项数组

javascript - 如何创建 localStorage 方法

javascript - 自动完成标签不显示隐藏元素上的数据

javascript - 错误: Cannot read property of null

Java扫描仪: stop reading after the first entry