React----类式组件（ref）

createRef()

import React, {Component} from 'react';

export default class Demo extends Component{
    constructor(props) {
        super(props);
        /* 
			React.createRef调用后可以返回一个容器，该容器可以存储被ref所标识的节点,该容器是“专人专用”的
		 */
        this.myRef = React.createRef();
        console.log('myRef====',this.myRef)
    }
    state={
        result:''
    }
    changeRef=()=> {
        console.log('myRef====',this.myRef.current.value)
        this.setState({result:this.myRef.current.value})
    }

    render() {
        const {result}=this.state
        return (
            <>
                <input ref={this.myRef} onChange={this.changeRef}/>
                <hr/>
                <h3>展示结果：{result}</h3>
            </>
        );
    }
}

回调函数形式的ref

import React, {Component} from 'react';

export default class Demo extends Component{
    state={
        result:''
    }
    changeRef=()=> {
        const {value}=this.myRef
        this.setState({result:value})
    }

    render() {
        const {result}=this.state
        return (
            <>
                <input ref={c=>this.myRef=c} onChange={this.changeRef}/>
                <hr/>
                <h3>展示结果：{result}</h3>
            </>
        );
    }
}