受控组件和非受控组件

受控组件和非受控组件

Posted by limantang on July 16, 2019

受控组件和非受控组件

  1. 受控组件

    在HTML中,表单元素input, select之类的元素通常是自己维护自己的state, 并且根据输入来更新自己的state

    但是在React当中, 可变状态通常保存在state中, 并且只能通过setState来更新(16.8版本可以使用useState)

    把两者结合起来,让React的state成为表单唯一的数据源,React组件控制表单的输入,这样的组件就是受控组件

         <input value={value} type="text" onChange={onChange}/>
    

    上面是一个最简单的例子,value的值只能通过input标签出发onChange事件来改变value的值

  2. 对于表单元素的数据来源是非React管理的就是非受控组件

       <input type="text" ref={inputRef}/>
    

    对于数据的处理不是同onChange函数,而是使用ref来控制