表单元素受控

/**
 * 受控组件：让React中的 state 成为表单元素的唯一数据源。
 * 核心：value + onChange事件，复选框是checked
*/ 

import React, { Component } from 'react'

export default class App extends Component {
  state = {
    username: '', // 用户名
    txt: '',
    course: 'JavaScript', // 课程
    sex: "", // 性别
    checked: false // 复选框的状态
  }
  // 多表单元素的受控
  handleChange(ev) {
    // 获取当前元素
    const target = ev.target;
    // 根据type值来判断当前元素是否是复选框
    let value = target.type === 'checkbox' ? 'checked' : 'value'
    // 在es6中，对象的key可以是一个变量
    this.setState({
      [target.name]: target[value]
    })
  }
  render() {
    const { username, txt, course, checked } = this.state
    return (
      <div>
        {/* 单选框的受控 */}
        <input type="text" name="username" value={ username } onChange={ ev => this.handleChange(ev) } />
        <div>{ username }</div>
        <hr />

        {/* 多行文本框的受控 */}
        <textarea name="txt" value={ txt } onChange={ ev => this.handleChange(ev) }></textarea>
        <hr />

        {/* 下拉框的受控 */}
        <select name="course" value={ course } onChange={ ev => this.handleChange(ev) }>
          <option value="JavaScript">JavaScript</option>
          <option value="Vue">Vue</option>
          <option value="React">React</option>
        </select>
        <hr />

        {/* 单选按钮 */}
        <label htmlFor="male">男:</label>
        <input id="male" type="radio" value="male" name="sex" onChange={ ev => this.handleChange(ev) } />
        <label htmlFor="female">女:</label>
        <input id="female" type="radio" value="female" name="sex" onChange={ ev => this.handleChange(ev) } />
        <hr />

        {/* 复选框 */}
        <input name="checked" type="checkbox" checked={ checked } onChange={ ev => this.handleChange(ev) } />
      </div>
    )
  }
}

 表单元素受控

/**
 * 受控组件：让React中的 state 成为表单元素的唯一数据源。
 * 核心：value + onChange事件，复选框是checked
*/ 

import React, { Component } from 'react'

export default class App extends Component {
  state = {
    username: '', // 用户名
    txt: '',
    course: 'JavaScript', // 课程
    sex: "", // 性别
    checked: false, // 复选框的状态
    likes: []
  }
  // 选择爱好
  chooseLikes(value) {
    console.log(value);
    // 把之前的数组复制一份
    const copyLikes = [ ...this.state.likes ];
    // 从数组中查询当前选择的元素的下标
    const idx = copyLikes.indexOf(value);
    // 判断当前元素在数组中是否存在
    if(idx === -1) { // 当前元素在数组中不存在
      // 将当前元素添加到数组中
      copyLikes.push(value);
    } else {
      // 如果存在就删除
      copyLikes.splice(idx, 1)
    }
    // 更新视图
    this.setState({
      likes: copyLikes
    })
  }
  render() {
    const { username, txt, course, checked } = this.state
    return (
      <div>
        {/* 单选框的受控 */}
        <input type="text" value={ username } onChange={ ev => this.setState({
          username: ev.target.value
        })} />
        <div>{ username }</div>
        <hr />

        {/* 多行文本框的受控 */}
        <textarea value={ txt } onChange={ ev => this.setState({
          txt: ev.target.value
        })}></textarea>
        <hr />

        {/* 下拉框的受控 */}
        <select value={ course } onChange={ ev => this.setState({
          course: ev.target.value
        })}>
          <option value="JavaScript">JavaScript</option>
          <option value="Vue">Vue</option>
          <option value="React">React</option>
        </select>
        <hr />

        {/* 单选按钮 */}
        <label htmlFor="male">男:</label>
        <input id="male" type="radio" value="male" name="sex" onChange={ ev => this.setState({
          sex: ev.target.value
        })} />
        <label htmlFor="female">女:</label>
        <input id="female" type="radio" value="female" name="sex" onChange={ ev => this.setState({
          sex: ev.target.value
        })} />
        <hr />

        {/* 复选框 */}
        <input type="checkbox" checked={ checked } onChange={ ev => this.setState({
          checked: ev.target.checked
        })} />
        <hr />

        {/* 复选框二 */}
        篮球：<input type="checkbox" value="篮球" onChange={ ev => this.chooseLikes(ev.target.value) } />
        足球：<input type="checkbox" value="足球" onChange={ ev => this.chooseLikes(ev.target.value) } />
        羽毛球：<input type="checkbox" value="羽毛球" onChange={ ev => this.chooseLikes(ev.target.value) } />
      </div>
    )
  }
}