React受控和非受控组件(表单双向绑定)

什么叫受控和非受控组件，最后再说，我们先用React来实现一个表单的双向绑定，类似Vue里面的v-model,只不过v-model类似一个语法糖而已

export default class App extends PureComponent {
  constructor(props){
    super(props);
    this.state ={
      username:'',
    }
  }
  render() {
    return (
      <div>
        <form onSubmit={e=>this.handleSubmit(e)}>
          <label htmlFor="username">
           用户: 
           <input type="text" id="username"
           onChange={e=>this.handleChange(e)}
           value={this.state.username}
           name="username">
            </input>
          </label>
          <button onClick={e=>this.handleSubmit}>提交</button>
        </form>
      </div>
    )
  }
  handleSubmit(event){
    //取消默认行为
    event.preventDefault()
    console.log(this.state.fruits)
  }
  handleChange(event){
    this.setState({
      //计算属性名
      [event.target.name]:event.target.value
    })
  }
}

效果如上。成功，但是有个地方得特别强调一下

  [event.target.name]:event.target.value

假如我们不这样写的话，那么我们每写一个表单框，我们就得加一个 handleChange点击事件，有10个表单我们就得写10个这样的事件，但是我们给每个表单绑定一个name得话，就像这样

<input name="text"/>

之后我们不论写多少个表单框，只需要这一个handleChange事件即可

我们再来做一个select框的双向绑定

export default class App extends PureComponent {
  constructor(props){
    super(props);
    this.state ={
      fruits:'orange'        //默认选中
    }
  }
  render() {
    return (
      <div>
        <form onSubmit={e=>this.handleSubmit(e)}>
          <select name="fruits" onChange={e=>this.handleChange(e)}
          value={this.state.fruits}>
         <option value="apple">苹果</option>
         <option value="banana">香蕉</option>
         <option value="orange">橘子</option>
          </select>
          <button onClick={e=>this.handleSubmit}>select提交</button>
        </form>
      </div>
    )
  }
  handleSubmit(event){
    //取消默认行为
    event.preventDefault()
    console.log(this.state.fruits)
  }
  handleChange(event){
    this.setState({
      //计算属性名
      [event.target.name]:event.target.value
    })
  }
}

下面可以解释一下受控组件了，我们上面写的就是受控组件，我们这个表单的双向绑定是怎么实现的呢？

其实是先监听输入框发生变化,根据改变的值，用setState把值赋给username,然后再把username的值赋到value，是一个这样的过程

下面再演示一下非受控组件，就是直接使用ref来获取input元素

import React, { PureComponent,createRef} from 'react'

export default class App extends PureComponent {
  constructor(props){
    super(props);
    this.usernameRef = createRef()
  }
  render() {
    return (
      <div>
        <form onSubmit={e=>this.handleSubmit(e)}>
          <label htmlFor="username">
           用户: 
           <input type="text" id="username" ref={this.usernameRef}>
            </input>
          </label>
          <button onClick={e=>this.handleSubmit}>提交</button> 
        </form>
      </div>
    )
  }
  handleSubmit(event){
    //取消默认行为
    event.preventDefault()
    console.log(this.usernameRef.current.value)
  }
}