组件实例三大属性 refs

React.createRef()

    <script type="text/babel">
        //创建组件
        class Demo extends React.Component{
            /*
                React.createRef调用后可以返回一个容器，
                该容器可以存储被ref所标识的节点，
                该容器是“专人专用”的，也就是说只能存一个
            */
           //就是每加一个ref，这里就要创建一个，有点繁琐，但是官方推荐这么使用
            myRef = React.createRef()
            myRef2 = React.createRef()
            //展示左侧输入框的数据
            showData = ()=>{
                alert(this.myRef.current.value)//这个current是固定的，反正就是要这样拿数据
            }
            //展示右侧输入框的数据
            showData2 = ()=>{
                alert(this.myRef2.current.value)
            }
            render(){
                return (
                    <div>
                        <input ref={this.myRef} type="text" placeholder="点击按钮提示数据" style={{marginRight:"20px"}}/>
                        <button onClick={this.showData} style={{marginRight:"20px"}}>点我提示左侧的数据</button>
                        <input ref={this.myRef2} onBlur={this.showData2} type="text" placeholder="失去焦点提示数据" style={{marginRight:"20px"}}/>
                    </div>
                )
            }
        }
        ReactDOM.render(<Demo/>,document.getElementById("test"))
    </script>

标签：current,精通,容器,React,1110,marginRight,createRef,20px
来源： https://blog.csdn.net/Heyuner/article/details/117867297