06-react ref使用，受控与非受控组件

ref基本使用

推荐使用方法二 ：传入对象

 ref的类型

 上面我们ref对映的都是html对象，也可以应用在自己定义的类组件上，函数组件不可以，函数组件就是一个函数，没有实例

 我们拿到了类组件对象，可以调用他的方法

 受控组件

 受控组件一般值html的表单，react里没有vue中v-model相关指令，所以受控组件和v-model效果差不多，就是自己控制表单的提交，input输入框的值保存在state中，同步更新

import React, { PureComponent } from 'react'

export default class App extends PureComponent {
    constructor(props){
        super(props)
        /* 使react的state成为唯一数据源 */
        this.state = {
            username :''
        }
    }
    render() {
        /* 渲染表单的react组件还控制着用户输入过程中表单发生的变化 */
        return (
            <div>
                <form onSubmit={e=>this.handleSubmit(e)}>
                    <label htmlFor="input">
                        用户:
                        <input type="text" id="input" onChange={e=>{this.handleChange(e)}} value={this.state.username}></input>
                    </label>
                    <input type="submit"></input>
                </form>
            </div>
        )
    }
    handleSubmit(e) {
        /* 阻止默认事件 */
        e.preventDefault()
    }
    handleChange(e) {
        this.setState({
            username:e.target.value
        },()=>{
            /* 因为setstate是异步的，可以在第二个参数回调函数里获取更新后的值 */
            console.log(this.state.username);
        })
    }
}

 非受控组件（不推荐）

使用dom节点保存value

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

export default class App extends PureComponent {
    constructor(props){
        super(props)
        this.inputRef = createRef()
    }
    render() {
        return (
            <div>
                {/* 表单数据交给dom节点来管理 */}
                <form onSubmit={e=>this.handleSubmit(e)}>
                    <label htmlFor="input">
                        用户:
                        <input type="text" id="input" ref={this.inputRef}></input>
                    </label>
                    <input type="submit"></input>
                </form>
            </div>
        )
    }
    handleSubmit(e) {
        e.preventDefault()
        /* 直接操作dom元素 没有使用react的state管理 */
       console.log(this.inputRef.current.value);
    }
   
}