受控组件

HTML 中的表单元素是可输入的，也就是有自己的可变状态.而 React 中可变状态通常保存在 state 中，并且只能通过 setState() 方法来修改 .React 将 state 与表单元素值 value 绑定到一起，由 state 的值来控制表单元素的值

受控组件：其值受到 React 控制的表单元素

实现方式:

1. 在 state 中添加一个状态，作为表单元素的 value 值（控制表单元素值的来源）
2. 给表单元素绑定 change 事件，将 表单元素的值 设置为 state 的值（控制表单元素值的变化）

class Hello extends React.Component {
  constructor() {
    super();
    this.state = { text: "" }; // 初始化state
  }

  handle = (e) => {
    //这里this指向当前组件实例
    this.setState({
      text: e.target.value,
    });
  };

  render() {
    return <input onChange={this.handle} value={this.state.text}></input>;
  }
}

//补充: 文本框、文本域、下拉框 操作value属性 复选框 操作checked属性

多表单元素处理

利用柯里化函数实现

柯里化（Currying），又称部分求值（Partial Evaluation），是把接受多个参数的函数变换成接受一个单一参数（最初函数的第一个参数）的函数，并且返回接受余下的参数而且返回结果是新函数的技术。

class Hello extends React.Component {
  state = {
    msg: "文本框",
    area: "文本域",
    selected: "sj",
    checked: false,
  };

  // 这是文本框, 文本域, 以及下拉选择共同使用的事件处理函数
  handle = (name) => {
    return (e) => {
      // 判断 当前事件目标是不是复选框,如果是,使用checked, 如果不是,使用value
      let value = name === "checked" ? e.target.checked : e.target.value;
      this.setState({
        [name]: value,
      });
    };
  };

  render() {
    return (
      <div>
        {/* 文本框 */}
        <input
          type="text"
          value={this.state.msg}
          onChange={this.handle("msg")}
        />
        <br />
        {/* 文本域 */}
        <textarea
          id=""
          cols="30"
          rows="10"
          value={this.state.area}
          onChange={this.handle("area")}
        ></textarea>
        <br />
        {/* 下拉框 */}
        <select
          name="selected"
          value={this.state.selected}
          onChange={this.handle("selected")}
        >
          <option value="cf">吃饭</option>
          <option value="sj">睡觉</option>
          <option value="ddd">打豆豆</option>
        </select>
        <br />
        {/* 复选框 */}
        <input
          type="checkbox"
          checked={this.state.checked}
          onChange={this.handle("checked")}
        />
      </div>
    );
  }
}

非受控组件

借助于 ref，使用原生 DOM 方式来获取表单元素值

ref 的作用：获取 DOM 或组件

实现方式:

1. 调用 React.createRef() 方法创建一个 ref 对象

   constructor() {
     super()
     this.txtRef = React.createRef()
   }

2. 将创建好的 ref 对象添加到文本框中

   <input type="text" ref={this.txtRef} />

3. 通过 ref 对象获取到文本框的值

   Console.log(this.txtRef.current.value);