React学习（从零基础到精通）1110

最新推荐文章于 2024-07-20 12:05:39 发布

南才

最新推荐文章于 2024-07-20 12:05:39 发布

阅读量124

点赞数

分类专栏： react学习 react 文章标签： react

本文链接：https://blog.csdn.net/Heyuner/article/details/117867297

版权

react 同时被 2 个专栏收录

26 篇文章 0 订阅

订阅专栏

react学习

25 篇文章 0 订阅

订阅专栏

这篇博客详细介绍了React中如何使用`React.createRef()`创建并使用refs，以获取组件内部DOM节点或实例。通过refs，开发者可以访问到输入框的值并在用户交互时进行数据展示。文中展示了在按钮点击和输入框失去焦点时如何利用refs获取并显示输入数据。

摘要由CSDN通过智能技术生成

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