react-非受控组件

非受控组件

---

非受控组件就是通过手动操作dom的方式获取文本框的值，文本框的状态不受react组件的state中的状态控制，直接通过原生dom获取输入框的值

实现步骤

1. 导入createRef 函数
2. 调用createRef函数，创建一个ref对象，存储到名为msgRef的实例属性中
3. 为input添加ref属性，值为msgRef
4. 在按钮的事件处理程序中，通过msgRef.current即可拿到input对应的dom元素，而其中msgRef.current.value拿到的就是文本框的值

import React, { createRef } from 'react'

class InputComponent extends React.Component {
  // 使用createRef产生一个存放dom的对象容器
  msgRef = createRef()

  changeHandler = () => {
    console.log(this.msgRef.current.value)
  }

  render() {
    return (
      <div>
        {/* ref绑定 获取真实dom */}
        <input ref={this.msgRef} />
        <button onClick={this.changeHandler}>click</button>
      </div>
    )
  }
}

受控组件和非受控组件的区别

受控组件

受控组件中输入框的值由change事件接管，做对应的数据劫持操作，由开发者控制

1. 创建一个state值，绑定到输入框的value上
2. 输入框绑定change事件传入事件$event
3. change事件得到输入框的值 e.target.value, 然后赋值改变state的值

import React, {Component} from 'react';

class ControlledComponent extends Component {
    constructor(props){
        super(props)
        this.state = {
            usename: ''
        }
    }
    handleChange = (e) => {
        this.setState({
            usename: e.target.value
        })
    }
    render(){
        return <>
            {this.state.usename}
            <br />
            <input value={this.state.usename} onChange={this.handleChange} />
        </>
    }
}
export const Controlled = ControlledComponent

非受控组件

非受控组件是通过ref获取输入框的值，在输入的过程中，做不到对输入值的操作，此时表单数据将由DOM来操作，不受开发者控制

1. 创建一个ref实例绑定到输入框的ref上
2. 通过DOM ref.current.value获取输入框的值

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

class UncontrolledComponent extends Component {
    constructor(props){
        super(props)
        this.state = {
            name: 'zhangsan'
        }
    
        this.inputNameRef = React.createRef()
    }
    handleClick = () => {
        console.log(this.inputNameRef);
        let ele = this.inputNameRef.current
        console.log(ele.value);
    }
    render(){
        return <div>
            <input defaultValue={this.state.name} ref={this.inputNameRef} />
            <button onClick={this.handleClick}>更新</button>
        </div>
    }
}


export const Uncontrolled = UncontrolledComponent