关于 React表单受控元素的解决方案

在我们写 React 组件中的表单的时候 通常都是直接写一个 value 然后 如果 直接 把 value 属性添加到input元素中那么 他将会在控制台中报错

然而这种情况并不是我们想要得到的,以下有俩种解决方案:
第一种: 把这个元素变成 非受控元素

 render:function(){
    return (
          <form action="">
              <input  type="text" defaultValue='hello' />
          </form>
      )
  }

但是 如果我们采用第一种方案的话，那么这个input输出框元素就不能进行数据绑定值了，这不是我们想看到的结果 ,这种方案只是缓解 ，想要根治 要采用
第二种方案:给他设定方法 用 状态来进行读取和修改
render方法:

   render:function(){
                return (
                    <form action="">
                        <input ref="myInput" type="text" onChange={this.handleChange} value={this.state.myValue} />
                    </form>
                )
            }

这是他的自定义 handleChange 方法:

handleChange:function(event){
                console.log(event.target.value);
                console.log(this.refs.myInput.value);
                // 设置状态
                this.setState({
                    myValue:this.refs.myInput.value,
                    
                })
            },

这是自定义状态的方法:

getInitialState:function(){
                return {
                    myValue:'hello'
                }
            },

然而这样我们就能实现数据绑定；

受控表单元素不是强制要求的，他的好处是方便我们统一进行管理