学习记录——react受控组件和非受控组件，操作dom（ React.createRef()）

受控组件
通过受控方式取值，可以实时的去拿，就像vue里的v-model，可以动态获取值。前提是，input框里的值要绑定到state里去。

打开页面查看：

非受控
在react中，我们可以通过ref来获取dom元素
用法：在需要获取的dom元素标签中使用ref=’xxx’
使用this.refs.xxx就可以获取到这个dom元素了

打开浏览器查看：如果有报错先不要管

当点击button的时候，控制台会输出绑定了ref的dom元素
而如果想要得到input里的值，直接.value即可


这就是 非受控：值不受状态影响，也就是状态不能实时获取它的值。

关于报错

Warning: A string ref, “ipt”, has been found within a strict mode tree. String refs are a source of potential bugs and should be avoided. We recommend using useRef() or createRef() instead. Learn more about using refs safely here: https://fb.me/react-strict-mode-string-ref

大概是说在严格模式下发现一个字符串的ref，refs在老的版本可能会有一个错误，建议使用useRef()或者createRef()

每一个类里都有一个构造函数 constructor 是类自带的，创建了类，就会自动执行这个构造函数。
在构造函数里初始化ref。

//把createRef方法解构出来
import React, {
      Component, createRef } from 'react' 

export default class Home extends Component {
     
    constructor(props) {
     //它是当前组件继承了Component后自带的
        super(props);//有继承关系
        this.nameRef = createRef() 创建了refs对象 新的api
    }

    handleBtn() {
     
    	//获取到绑定了ref的dom元素
        console.log(this.nameRef.current)
         
		//获取dom元素里的值
        console.log(this.nameRef.current.value) 
    }

    render() {
     
        return (
            <div>
                <input ref={
     this.nameRef} type="text" />
                <button onClick={
     () => this.handleBtn()}>createRef方法获取input的值</button>
            </div>
        )
    }
}

打开浏览器查看：报错没有了

如果有多个元素需要，就写多个this.xxx=createRef()，然后给元素绑定对应的ref=this.xxx