zoukankan      html  css  js  c++  java
  • 受控组件与不受控制的组件有什么区别?

    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方式”。

  • 相关阅读:
    关闭浏览器清除cookie
    JSONP跨域请求数据报错 “Unexpected token :”的解决办法
    HTTP请求方法
    Html 中判断某个class的个数
    将div标签中的table水平居中
    js阻止事件冒泡
    Vue中V-bind的使用。为何标签中style="height:90px"也需要写为V-bind:style="height:90px",哪些属性需要绑定?哪些属性不需要绑定?
    css中 !important的作用。
    Notification通知
    DataAdapter中DeleteCommand和UpdateCommand
  • 原文地址:https://www.cnblogs.com/passkey/p/10286502.html
Copyright © 2011-2022 走看看