react 非受控组件和受控组件

react 获取input输入框的值

第一种方式 非受控组件

ref

第一种

<div>
    <input type='text' ref={this.inputRef} defaultValue=' 我是非受控组件' />
    <button onClick={()=>{
          console.log('ref', this.inputRef.current.value);
     }}>search</button>
</div>

第二种

<div>
   <input type='text' ref={input => this.valInput = input} defaultValue='我是非受控组件'/>
   <button onClick={()=>{
        console.log(this.valInput.value);
    }}>点我获取非受控组件的值</button>
</div>

第二种方式 受控组件 this.setState

<div>
    <input type='text' onChange={this.handleChange.bind(this)} defaultValue={this.state.valInput1} />
     {this.state.valInput1}
 </div>
handleChange(e){
        this.setState({
            valInput1:e.target.value
        })
    }