react的受控组件和非受控组件

目录

# 受控组件

# 非受控组件

---

# 受控组件

就是将state与表单项中的value值绑定在一起，由state的值来控制表单元素的值

下面就以 demo 来具体谈一谈我对受控组件的理解，献丑了！

import React, { Component } from "react";

export default class Login extends Component {
  // state添加两个状态作为表单的value
  state = {
    username: {
      value: "",
      // change 事件获取改变的 value
      onChange: (e) => this.setState((state) => ({ username:{...state.username, value:e.target.value.trim()}})),
    },
    password: {
      value: '',
      onChange: (e) => this.setState((state) => ({ password: {...state.password, value: e.target.value.trim()}}))
    },
  };

  loginFn = () => {
    // 做一些被控制后的事情
    // 此时，只需要 username 和 password 两个值
    let postData = Object.keys(this.state).reduce((p, c) => {
      p[c] = this.state[c].value
      return p
    }, {})
    
    // Object.keys() 方法会返回一个给定对象的自身可枚举属性组成的数组
    // 数组.reduce(function(prev,item,index,arr){},初始值)
    // 回调函数可以有四个参数：
    // 1、上次调用回调返回的值 prev 或初始值，
    // 2、当前被处理的元素 cur
    // 3、当前元素的索引 index
    // 4、调用reduce的数组 array
  }
  render() {
    let { username, password } = this.state;

    return (
      <div>
        {/* 受控组件 */}
        <div>
          <input type="text" {...username} />
        </div>
        <div>
          <input type="text" {...password} />
        </div>
        {/* 按钮绑定click做一些事情 */}
        <button onClick={this.loginFn}>受控了</button>
      </div>
    );
  }
}

# 非受控组件

非受控组件，就是没有和state数据源进行关联的表单项，借助ref，使用DOM元素获取表单元素获取vlaue,每次获取都是最新值

import React, { Component, createRef } from 'react'

export default class App extends Component {
  constructor(props) {
    super(props)

    // 创建ref，初始值可以为任意类型，赋值为null，更有利于垃圾回收
    this.formRef = {
      username: createRef(null),
      password: createRef(null),
    }
  }

  // 方法,拿到数据做一些事
  onSubmit = () => {
    let formData = Object.keys(this.formRef).reduce((p, c) => {
      p[c] = this.formRef[c].current.value.trim()
      return p
    }, {})
    
  }

  render() {
    let {username,password} = this.formRef

    return (
      <div>
        {/* 非受控组件 */}
        <div>
        <input type="text" ref={username} />
        </div>
        <div>
        <input type="text" ref={password} />
        </div>
        <div>
          <button onClick={this.onSubmit}>拿过来吧</button>
        </div>
      </div>
    )
  }
}

最最最实用的写法是：
直接获取
<input type="text" ref={el => this.username = el} />
<input type="text" ref={el => this.password = el} />