箭头函数额外传参，控制表单元素值的显示与改变，其他受控组件

使用箭头函数额外传参{
import ReactDOM from 'react-dom';
import React from 'react';
class Time extends React.Component {
  state = {
    Time: new Date().toLocaleTimeString(),
    stat: [
      { id: '1', naem: 'xx' },
      { id: '2', naem: 'yy' },
      { id: '3', naem: 'zz' }
    ]
  }

  handleClick = (e, id) => {
    this.setState({ Time: new Date().toLocaleTimeString() })
    console.log(e);
    console.log(id);
  }
  render() {
    return (
      <div>
        <h1>{this.state.Time}</h1>
        <button onClick={this.handleClick} >获取当前时间</button>
        {this.state.stat.map((item) => (
          <div key={item.id}>{item.naem}<button onClick={(e) => { this.handleClick(e, item.id) }}>删除</button></div>
        ))}
      </div>
    )
  }
}
ReactDOM.render(<Time />, document.getElementById('root'));

控制表单元素值的显示与改变
import React from 'react';

export class CtrFrom extends React.Component {
  // 1 控制表单元素的显示
  state = {
    txt: 'txt',
    txt2: 'txt2',
    txt3: 'txt3',
  };

  // 表单元素值的变化
  handleTxt = (e) => {
    console.log(e.target.value);
    // 设置组件状态
    this.setState({
      txt: e.target.value,
    });
  };
  handleTxt2 = (e) => {
    console.log(e.target.value);
    // 设置组件状态
    this.setState({
      txt2: e.target.value,
    });
  };
  handleTxt3 = (e) => {
    console.log(e.target.value);
    // 设置组件状态
    this.setState({
      txt3: e.target.value,
    });
  };

  // 提交数据
  handleSubmit = () => {
    // 发起ajax请求
    console.log(this.state);
    const form = {
      name: this.state.txt,
      info: this.state.txt2,
      msg: this.state.txt3,
    };
    console.log(form);
    // .post('', data)
  };

  render() {
    // console.log('render');
    return (
      <div>
        {/* 控制表单元素的变化 */}
        <input type={'text'} value={this.state.txt} onChange={this.handleTxt} />
        <input
          type={'text'}
          value={this.state.txt2}
          onChange={this.handleTxt2}
        />
        <input
          type={'text'}
          value={this.state.txt3}
          onChange={this.handleTxt3}
        />

        <button onClick={this.handleSubmit}>提交</button>
      </div>
    );
  }
}

其他受控组件练习
import React from 'react';
export class OtherForm extends React.Component {
  // constructor() {
  //     super()
  //     // 表单状态
  //     this.state = {
  //        txt:'xx',
  //     }
  //   }
  state = {
    txt: 'xx',
    content: 'content',
    city: 'gz',
    isChecked: true,
  };
  // 文本变化
  handleChange = (e) => {
    // 改变state
    this.setState({
      txt: e.target.value,
    });
  };
  // 文本域变化
  handleContent = (e) => {
    this.setState({
      content: e.target.value,
    });
  };
  // 城市的变化
  handleCity = (e) => {
    this.setState({
      city: e.target.value,
    });
  };
  // 复选框变化
  handleIsChecked = (e) => {
    this.setState({
      isChecked: e.target.checked,
    });
  };

  render() {
    console.log(this.state);
    return (
      <div>
        {/* 文本框 */}
        <input
          type="text"
          value={this.state.txt}
          onChange={this.handleChange}
        ></input>
        <hr />

        {/* 文本域 */}
        <textarea
          value={this.state.content}
          onChange={this.handleContent}
        ></textarea>
        <hr />

        {/* 下拉框 */}
        <select value={this.state.city} onChange={this.handleCity}>
          <option value="sh">上海</option>
          <option value="bj">北京</option>
          <option value="gz">广州</option>
        </select>
        <hr />

        {/* 复选框 */}
        <input
          type="checkbox"
          checked={this.state.isChecked}
          onChange={this.handleIsChecked}
        ></input>
        <hr />
        <button onClick={() => console.log(this.state)}>提交</button>
      </div>
    );
  }
}

代码优化
import React from 'react';
export class OtherForm extends React.Component {
  // constructor() {
  //     super()
  //     // 表单状态
  //     this.state = {
  //        txt:'xx',
  //     }
  //   }
  state = {
    txt: 'xx',
    content: 'content',
    city: 'gz',
    isChecked: true,
  };

  handleChange = (e) => {
    if (e.target.name === 'isChecked') {
      this.setState({
        [e.target.name]: e.target.checked,
      });
    } else {
      // 改变state
      this.setState({
        [e.target.name]: e.target.value,
      });
    }
  };

  render() {
    console.log(this.state);
    return (
      <div>
        {/* 文本框 */}
        <input
          type="text"
          name='txt'
          value={this.state.txt}
          onChange={this.handleChange}
        ></input>
        <hr />

        {/* 文本域 */}
        <textarea
          name='content'
          value={this.state.content}
          onChange={this.handleChange}
        ></textarea>
        <hr />

        {/* 下拉框 */}
        <select value={this.state.city} onChange={this.handleChange} name='city'>
          <option value="sh">上海</option>
          <option value="bj">北京</option>
          <option value="gz">广州</option>
        </select>
        <hr />

        {/* 复选框 */}
        <input
          type="checkbox"
          name='isChecked'
          checked={this.state.isChecked}
          onChange={this.handleChange}
        ></input>
        <hr />
        <button onClick={() => console.log(this.state)}>提交</button>
      </div>
    );
  }
}
}