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

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

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