React中的受控表单与非受控表单

React中的受控表单与非受控表单

使用规则：
实时监控时用到的是受控表单
点击提交时用到的是非受控表单

1.受控表单：值由我们自己定义的
必须是 onChange 和 value 才能使用

//文本框使用受控表单
 onChange=(event)=>{
    this.setState({
      value:event.target.value
    })
  }
  
 render() {
    const {value} = this.state
    return (
   
      <div>
          <input type="text" onChange={this.onChang} value={value}/>
      </div>
    )
  }

//下拉框使用受控表单
 onChange2 = event =>{
     this.setState({
       select:event.target.value
     })
  }

	<select onChange={this.onChange2} value={select}>
      <option value="1">小花</option>
      <option value="2">小白</option>
    </select>

2.非受控表单：如果一个表单组件没有value prop就可以称为非受控组件

//获取当前的代码块 和输入的值
//如果没有用ref 可以使用document.querySelector('input').value  获取到值
 onClick = event =>{
    console.log(this.abc,this.abc.value)
  }

 <input type="text" ref={v =>this.abc = v}/>
          <button onClick={this.onClick}>点击</button>