受控组件和非受控组件

一、表单
受控组件和非受控组件

受控组件： 组件的使用者，有能力完全控制该组件的行为和内容。通常情况下，受控组件往往没有自身的状态，其内容完全收到属性的控制。

非受控组件： 组件的使用者，没有能力控制该组件的行为和内容，组件的行为和内容完全自行控制。一般不用非受控组件，因为这玩意儿就是直接操作DOM
在非受控组件中通常使用defaultValue来设置默认值；
如果要使用非受控组件中的数据，那么我们需要使用 ref 来从DOM节点中获取表单数据

表单组件，默认情况下是非受控组件，一旦设置了表单组件的value属性，则其变为受控组件(单选和多选框需要设置checked)

例1：设计一个受控的综合表单

import React, { Component } from 'react'

export default class Form extends Component {
  state = {
    loginId: "",
    loginPwd: "",
    sex: "male",
    chooseLoves: [],
    loves: [
      { value: "football", text: "足球" },
      { value: "basetball", text: "篮球" },
      { value: "movie", text: "电影" },
      { value: "music", text: "音乐" },
      { value: "other", text: "其他" },
    ],
    city: "beijing"
  }
  valueChange = e => {
    let val = e.target.value;
    let name = e.target.name;
    if (e.target.type === "checkbox") {
      //对val进行特殊处理
      if (e.target.checked) {
        val = [...this.state.chooseLoves, val];
      }
      else {
        val = this.state.chooseLoves.filter(it => it !== val);
      }
    }
    this.setState({
      [name]: val
    })
  }
  getLoveCheckBoxes() {
    const checkboxes = this.state.loves.map(it => (
      <label key={it.value} >
        <input type="checkbox" name="chooseLoves"
          value={it.value}
          checked={this.state.chooseLoves.includes(it.value)}
          onChange={this.valueChange}
        />
        {it.text}
      </label>
    ));
    return checkboxes;
  }
  render() {
    const checkboxes = this.getLoveCheckBoxes();
    return (
      <div>
        <p>
          账号：
          <input type="text" value={this.state.loginId} name="loginId" onChange={this.valueChange} />
        </p>
        <p>
          密码：
          <input type="password" value={this.state.loginPwd} name="loginPwd" onChange={this.valueChange} />
        </p>
        <p>
          性别：
          <label>
            <input type="radio" name="sex" value="man" checked={this.state.sex === 'male'} onChange={this.valueChange} />
            男
          </label>
          <label>
            <input type="radio" name="sex" value="female" checked={this.state.sex === 'female'} onChange={this.valueChange} />
            女
          </label>
        </p>
        <p>
          {checkboxes}
        </p>
        <p>
          <select name="city" value={this.state.city}
            onChange={this.valueChange}
          >
            <option value="beijing">北京</option>
            <option value="shanghai">上海</option>
            <option value="chengdu">成都</option>
          </select>
        </p>
        <button onClick={() => {
          console.log(this.state);
        }}>查看表单信息</button>
      </div>
    )
  }
}

例2：非受控组件

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