react-表单

所有的表单元素默认为非受控组件

非受控组件: 组件的内容元素等只受该组件控制,使用者不可控制

将表单元素转换为受控组件

type为text,password,textarea,还有select选择器设置value属性即可转化为受控组件
radio与checkbox则需要设置checked属性

注意事项

1. 当value属性设置为静态值时,也就意味着该值不可改变,需要设置readOnly属性
2. 当value属性设置为变量,即与state绑定时,需要提供onChange事件,以改变value值,否则出警告

FormGroup.js

import React, { Component } from 'react'

export default class FormGroup extends Component {
  state = { // 设置初始属性
    loginId: '', // 登陆账号
    loginPwd: '', // 登陆密码
    sex: 'male', // 性别
    loves: [
      {
        value: 'football',
        label: '足球'
      },
      {
        value: 'basketball',
        label: '篮球'
      },
      {
        value: 'movie',
        label: '电影'
      },
      {
        value: 'music',
        label: '音乐'
      },
      {
        value: 'other',
        label: '其他'
      }
    ], // 爱好
    chooseLoves: [], // 已选择的爱好
    city: '' // 城市
  }
  /**
   * 处理表单元素改变
   * @param {Object} e 
   */
  handleChange = e => {
    let value = e.target.value
    const name = e.target.name
    if (e.target.type === 'checkbox') {
      if (e.target.checked) {
        value = [...this.state.chooseLoves, value]
      }else {
        value = this.state.chooseLoves.filter(it => it !== value)
      }
    }
    this.setState({
      [name]: value
    })
  }
  /**
   * 获取爱好列表
   * @returns Array
   */
  getLoves = () => {
    const bs = this.state.loves.map(it => {
      return (
        <label key={it.value}> {/* 循环需要绑定key */}
          <input name='chooseLoves' type="checkbox"
            checked={this.state.chooseLoves.includes(it.value)} 
            value={it.value} onChange={this.handleChange} />
          {it.label}
        </label>
      )
    })
    return bs
  }

  render() {
    const bs = this.getLoves() // 获取爱好列表
    return (
      <div>
        {/* 需要让表单元素的name属性与state状态用相同的名字 */}
        <p>
          <input name='loginId' type="text" value={this.state.loginId} onChange={this.handleChange} />
        </p>
        <p>
          <input name='loginPwd' type="password" value={this.state.loginPwd} onChange={this.handleChange} />
        </p>
        <p>
          <label>
            <input name='sex' type="radio" value='male' checked={this.state.sex === 'male'} onChange={this.handleChange} />
            男
          </label>
          <label>
            <input name='sex' type="radio" value='female' checked={this.state.sex === 'female'} onChange={this.handleChange} />
            女
          </label>
        </p>
        <p>
          {/* 列表元素特殊处理 */}
          {bs}
        </p>
        <p>
          <select name="city" value={this.state.city} onChange={this.handleChange} placeholder='请选择城市'>
            <option value="beijing">北京</option>
            <option value="shanghai">上海</option>
            <option value="shenzhen">深圳</option>
          </select>
        </p>
        <button onClick={()=> {
          console.log('状态', this.state)
        }}>获取状态</button>
      </div>
    )
  }
}