react表单-受控

react - 表单组件

受控组件

表单项中的值（value/checked）受到类组件state中数据来控制，同时还需要绑定一个onChange事件来完成对state中数据的修改

import React, {
    Component } from 'react';

class AppInput extends Component {
   
  // 设置受控组件
  state = {
   
    userName: '',
    passWord: '',
    userName2: '',
    passWord2: ''
  }
  changeName = event => {
   
    this.setState({
   
      userName: event.target.value.trim()
    })
  }
  changePassword = event => {
   
    this.setState({
   
      passWord: event.target.value.trim()
    })
  }
  clickHandler = () => {
   
    console.log(this.state)
  }
  
  setValue = event => {
   
    this.setState({
   
      [event.target.name]: event.target.value.trim()
    })
  }
  render() {
   
    const {
    userName, passWord, userName2, passWord2 } = this.state
    return (
      <div>
        <label >
          账号：
          <input type="text" value={
   userName} onChange={
   this.changeName} />
        </label>
        <br />
        <label >
          密码：
          <input type="passWord" value={
   passWord} onChange={
   this.changePassword} />
        </label>
        <br />
        <button onClick={
   this.clickHandler}>点击进入</button>

        <div>
          {
   /* 为了简化代码还可以使用对象签名来整合onchange事件 */}
          <label htmlFor="">
            账号：
            <input type="text" name='userName2' value={
   userName2} onChange={
   this.setValue} />
          </label>
          <br />
          <label htmlFor="">
            密码：
            <input type="passWord" value={
   passWord2} name='passWord2' onChange={
   this.setValue} />
          </label>
          <br />
          <button onClick={
   this.clickHandler}>点击进入</button>
        </div>
      </div>
    );
  }
}

export default AppInput;

为了体现react的灵活性，和方便组件拆分，还可以用一种高级写法

import React, {
    Component } from 'react';

const formState = _this => {
   
    return {
   
        userName: {
   
            value: '',
            onChange: event => _this.setState({
   
                // 下面是对state中的userName进行更新，展开获取所有的值，在修改更新后的value
                userName: {
    ..._this.state.userName, value: event.target.value }
            })
        },
        passWord: {
   
            value: '',
            onChange: event => _this.setState(state => ({
   
                // passWord : {..._this.state.passWord , value : event.target.value}
                passWord: Object.assign({
   }, state.passWord, {
    value: event.target.value.trim() })
            }))
        }
    }
}
class AppInput02 extends Component {
   
    state = {
   
        // userName : {
   
        //     value : '',
        //     onChange : event => this.setState({
   
        //         // 下面是对state中的userName进行更新，展开获取所有的值，在修改更新后的value
        //         userName : {...this.state.userName , value : event.target.value}
        //     })
        // },
        // passWord : {
   
        //     value : '',
        //     onChange : event => this.setState({
   
        //         passWord : {...this.state.passWord , value : event.target.value}
        //     })
        // }

        //这样写就是为了方便将代码提取
        ...formState(this)
    }
    clickhandler = () => {
   
        console.log(this.state)
    }
    render() {
   
        const {
    userName, passWord } = this.state
        return (
            <div>
                <label >
                    账号：
                    <input type="text" {
   ...userName} />
                </label>
                <label >
                    密码：
                    <input type="passWord" {
   ...passWord} />
                </label>
                <button onClick={
   this.clickhandler}>点击进入</button>
            </div>
        );
    }
}

export default AppInput02;

案例： 全选按钮

import React, {
    Component } from 'react';

class AppInput03 extends Component {
   
    state = {
   
        option: ['html', 'css', 'js', 'vue', 'react'],
        selection: [],
        selectAll : false
    }
    selection = e=> {
   
        console.log(e.target.value , e.target.checked)
        let value = e.target.value
        // 通过给单选框绑定一个value，在改变的时候通过这个值判断改变的是哪一个input ，并将选中与否的结果用是否选中数组中是够存有值来相关联
        if(e.target.checked){
   
            this.state.selection.push(value)
            this.state.selectAll = this.state.selection === this.state.option

        }else{
   
            this.state.selection = this.state.selection.filter(itm => itm !== value)
            // this.state.selectAll = this.state.selection === this.state.option
            this.state.selectAll = false
        }
        // 别忘了渲染
        // this.setState({})
        this.forceUpdate()
    }
    clickHandler =()=> {
   
        console.log(this.state)
    }
    // 控制是否全选，实际上就是selection数组中是否包含了全部的option数组选项
    selectAll = (e)=>{
   
        this.state.selectAll = e.target.checked
        if(e.target.checked){
   
            this.state.selection = this.state.option
        }else{
   
            this.state.selection = []
        }
        this.forceUpdate()
    }
    render() {
   
        const {
    option, selection ,selectAll } = this.state
        return (
            <div>
                <label >
                    全选：
                <input type="checkbox"  checked={
   selectAll} onChange={
   this.selectAll}/>
                </label>
                <div>
                    <ul>
                        {
   /* 在使用state中结构出来的值时，一定要加{} , 为啥老是忘记*/}
                       {
   option.map((itm , index) => (
                        <li key={
   index}>
                            {
   /* 单选多选框中决定表单是否是受控组件的属性是 checked ， */}
                            <input type="checkbox" value={
   itm} checked={
   selection.includes(itm)} onChange={
   this.selection}/>
                            <span>{
   itm}</span>
                        </li>
                       ))}
                    </ul>
                </div>
                <button onClick={
   this.clickHandler}>查看数据</button>
            </div>
        );
    }
}

export default AppInput03;