React中createRef使用

// ★ 最为推荐的一种创建ref的方式: createRef
class ClassicalRef extends React.Component {
    /**
     * React.createRef调用后可以返回一个容器,这个容器可以存储被ref所标识的节点
     * 该容器是专人专用的
     * */
    nodeRef01 = React.createRef();
    nodeRef02 = React.createRef();

    showData = () => {
        console.log('output-> this.nodeRef01.current.value::: ', this.nodeRef01.current)
        console.log('output-> this.nodeRef02.current.value::: ', this.nodeRef02.current)
    }

    render() {
        return (
            <div>
                <input ref={this.nodeRef01} type='text' placeholder='点击按钮提示数据'/> &nbsp;
                <br/>
                <div ref={this.nodeRef02}></div>
                <button onClick={this.showData}>display node info</button>
            </div>
        )
    }
}
posted @ 2023-09-15 14:35  Felix_Openmind  阅读(102)  评论(0)    收藏  举报
*{cursor: url(https://files-cdn.cnblogs.com/files/morango/fish-cursor.ico),auto;}