react 之受控组件与非受控组件

react 之受控组件与非受控组件

• 所谓受控组件：就是input、textarea、select的值的改变通常是根据用户输入进行更新，采用的是 对表单进行控制的实现<input value={受控值} onChange={受控的方法} /> 受控值需要定义在state之中，然后的话在受控的方法之中拿到当前受控值，修改state之中的受控值！
• 所谓非受控组件，就是使用ref节点的形式去拿到当前节点的value值，然后赋值给给一个节点：比如this.iptName，而iptName代表的是当前input节点,<input type="text" ref={(iptName) => (this.iptName = iptName)} />，在使用的时候，需要拿到当前节点的值的时候：this.iptName.value，然后的话，使用额外操作的方法，去修改state的值

受控组件

import React, { Component } from "react";

export default class app extends Component {
  state = {
    count2: 0,
    optionValue: 1,
    iptName2: "",
  };
  // 受控组件
  selectChange = (event) => {
    const optionValue = event.target.value * 1;
    this.setState({
      optionValue,
    });
  };
  add2 = () => {
    const { count2, optionValue } = this.state;
    this.setState({
      count2: count2 + optionValue,
    });
  };
  sub2 = () => {
    const { count2, optionValue } = this.state;
    this.setState({
      count2: count2 - optionValue,
    });
  };
  iptName2Change = (event) => {
    const iptName2 = event.target.value;
    // console.log('使劲',iptName2);
    this.setState({
      iptName2,
    });
  };
  submit2 = () => {
    const { iptName2 } = this.state;
    console.log("提交的时候", iptName2);
  };
  render() {
    const { count2, optionValue, iptName2 } = this.state;
    return (
      <div>
        <div>
          <div>受控组件</div>
          <div>add的数目: {count2}</div>
          <div>
            <select value={optionValue} onChange={this.selectChange}>
              <option value="1">1</option>
              <option value="2">2</option>
              <option value="3">3</option>
            </select>
            &nbsp;
            <button onClick={this.add2}>+</button>&nbsp;
            <button onClick={this.sub2}>-</button>&nbsp;
          </div>
          <div>input2输入的值：{iptName2}</div>
          <input type="text" value={iptName2} onChange={this.iptName2Change} />
          <button onClick={this.submit2}>提交</button>
        </div>
      </div>
    );
  }
}

非受控组件

import React, { Component } from "react";

// import { Button, Toast } from "antd-mobile";

export default class app extends Component {
  state = {
    count: 0,
    iptName: "",
  };
  // 非受控组件
  add = () => {
    // 拿到select的值
    const num = this.select.value * 1;
    const { count } = this.state;
    this.setState({
      count: count + num,
    });
  };
  sub = () => {
    const num = this.select.value * 1;
    const { count } = this.state;
    this.setState({
      count: count - num,
    });
  };
  evenAdd = () => {
    const num = this.select.value * 1;
    const { count } = this.state;
    if (num % 2 === 0) {
      this.setState({
        count: count + num,
      });
    }
  };
  asyncAdd = () => {
    const num = this.select.value * 1;
    const { count } = this.state;
    setTimeout(() => {
      this.setState({
        count: count + num,
      });
    }, 2000);
  };
  onBlur = () => {
    console.log("inpName失去焦点", this.iptName.value);
  };
  submit = () => {
    console.log("输入的值", this.iptName.value);
    // 点击提交的时候 拿到input表单的值
    const iptName = this.iptName.value;
    this.setState({
      iptName,
    });
    // 并且清空 input的值
    // this.iptName.value = ""
  };
  render() {
    const { count, iptName } = this.state;
    return (
      <div>
        <div>
          <div>非受控组件</div>
          <div>add数: {count}</div>
          <div>
            <select ref={(select) => (this.select = select)}>
              <option value="1">1</option>
              <option value="2">2</option>
              <option value="3">3</option>
            </select>
            &nbsp;
            <button onClick={this.add}>+</button>&nbsp;
            <button onClick={this.sub}>-</button>&nbsp;
            <button onClick={this.evenAdd}>偶数加</button>&nbsp;
            <button onClick={this.asyncAdd}>异步add</button>
          </div>
          <div>input输入的值：{iptName}</div>
          <input
            type="text"
            ref={(iptName) => (this.iptName = iptName)}
            onBlur={this.onBlur}
          />
          <button onClick={this.submit}>提交</button>
        </div>
      </div>
    );
  }
}