标签：current 精通 容器 React 1110 marginRight createRef 20px

组件实例三大属性 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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。