码迷,mamicode.com
首页 > 其他好文 > 详细

受控组件( controlled component )与不受控制的组件( uncontrolled component )区别

时间:2018-12-04 20:38:59      阅读:207      评论:0      收藏:0      [点我收藏+]

标签:tar   OLE   部分   格式   字段   单元素   获取   来源   而不是   

  React 的很大一部分是这样的想法,即组件负责控制和管理自己的状态。React 的很大一部分是这样的想法,即组件负责控制和管理自己的状态。

  当我们将 native HTML 表单元素( input, select, textarea 等)投入到组合中时会发生什么?我们是否应该使用 React 作为“单一的真理来源”,就像我们习惯使用React一样? 或者我们是否允许表单数据存在 DOM 中,就像我们习惯使用HTML表单元素一样? 这两个问题是受控(controlled) VS 不受控制(uncontrolled)组件的核心。

 受控组件是React控制的组件,也是表单数据的唯一真理来源。

  如下所示,username 不存在于 DOM 中,而是以我们的组件状态存在。每当我们想要更新 username 时,我们就像以前一样调用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>

      )

    }

  }

 

 不受控制组件( uncontrolled component )是您的表单数据由 DOM 处理,而不是您的 React 组件。

  我们使用 refs 来完成这个。

  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获取值,但是通常建议您通过不受控制的组件来支持受控组件。

  主要原因是受控组件支持即时字段验证,允许您有条件地禁用/启用按钮,强制输入格式,并且更多的是 『the React way』。

受控组件( controlled component )与不受控制的组件( uncontrolled component )区别

标签:tar   OLE   部分   格式   字段   单元素   获取   来源   而不是   

原文地址:https://www.cnblogs.com/kingwu/p/10066524.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!