受控组件与不受控制的组件有什么区别?

Posted passkey

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了受控组件与不受控制的组件有什么区别?相关的知识,希望对你有一定的参考价值。

React的很大一部分是将组件控制和管理自己的状态的想法。

当我们将本机html表单元素(输入,选择,文本区域等)投入到组合中时会发生什么?我们是否应该使用React作为“单一的真理来源”,就像我们习惯使用React一样,或者我们是否允许表单数据生活在DOM中,就像我们习惯于使用HTML表单元素一样?这两个问题是控制和不受控制组件的核心。

甲控制组分为其中阵营处于组分控制和是真理的表单数据的单一来源。

如下所示,用户名不存在于DOM中,而是以我们的组件状态存在。每当我们想要更新用户名时,我们就像以前一样调用setState

class ControlledForm extends Component {
  state = {
    username: ‘‘
  }
  updateUsername = (e) => {
    this.setState({
      username: e.target.value,
    })
  }
  handleSubmit = () => {}
  render () {
    return (
      <form onSubmit={this.handleSubmit}>
        <input
          type=‘text‘
          value={this.state.username}
          onChange={this.updateUsername} />
        <button type=‘submit‘>Submit</button>
      </form>
    )
  }
}

 

一种不受控制的组分为其中表单数据由DOM处理,而不是你阵营组件内部。

你可以使用参考来完成这个。

class UnControlledForm extends Component {
  handleSubmit = () => {
    console.log("Input Value: ", this.input.value)
  }
  render () {
    return (
      <form onSubmit={this.handleSubmit}>
        <input
          type=‘text‘
          ref={(input) => this.input = input} />
        <button type=‘submit‘>Submit</button>
      </form>
    )
  }
}
虽然不受控制的组件通常更容易实现,

因为您只需使用引用从DOM获取值,通常建议您通过不受控制的组件来支持受控组件。主要原因是受控组件支持即时字段验证,允许您有条件地禁用/启用按钮,强制输入格式,并且更多的是“React方式”。

以上是关于受控组件与不受控制的组件有什么区别?的主要内容,如果未能解决你的问题,请参考以下文章

组件正在将不受控制的自动完成更改为受控

警告:组件正在将文本类型的受控输入更改为不受控制。 (反应.js)

markdown 反应受控和不受控制的组件

电子邮件输入警告 - 组件正在将文本类型的受控输入更改为不受控制

React-Mobx 警告:组件正在更改不受控制的输入

Material UI Select Component - 一个组件正在将文本类型的受控输入更改为不受控制