react中ref的基本使用

最新推荐文章于 2023-10-30 10:52:27 发布

LingSnow1019

最新推荐文章于 2023-10-30 10:52:27 发布

阅读量175

点赞数

文章标签： react

本文链接：https://blog.csdn.net/LingSnow1019/article/details/113775571

版权

本文介绍了在React中三种使用Refs的方式：字符串形式的Refs、回调函数形式的Refs以及使用createRef方法创建Refs。通过示例代码展示了如何利用Refs获取DOM元素的引用并进行操作。

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

字符串形式的ref

        class Demo extends React.Component{
           showData = () =>{
               const {input1} = this.refs
               alert(input1.value)
           }
           showData2 = () =>{
               const {input2} = this.refs
               alert(input2.value)
           }
           render() {
               return (
                   <div>
                      <input type="text" placeholder="点击按钮提示数据" ref="input1" />&nbsp;&nbsp;
                      <button onClick={this.showData}>点击我提示左边的数据</button>&nbsp;&nbsp;
                      <input type="text" placeholder="失去焦点提示数据" onBlur={this.showData2} ref="input2" />&nbsp;&nbsp;
                   </div>
               )
           }
       }
       ReactDOM.render(<Demo />,document.getElementById("text"))

回调函数形式的ref

       class Demo extends React.Component{
           showData = () =>{
               const {input1} = this
               alert(input1.value)
           }
           showData2 = () =>{
               const {input2} = this
               alert(input2.value)
           }
           saveInput = (c) =>{
               this.input1 =c;
               console.log(c)
           }
           render() {
               return (
                   <div>
                    {/*  <input type="text" placeholder="点击按钮提示数据" ref={(currentNode) => {this.input1 = currentNode}} />&nbsp;&nbsp; */}
                      <input type="text" placeholder="点击按钮提示数据" ref={this.saveInput} />&nbsp;&nbsp;{/*直接写内联函数会导致ref重复调用,可以写成绑定函数的形式，怎么写其实无关紧要 */}
                      <button onClick={this.showData}>点击我提示左边的数据</button>&nbsp;&nbsp;
                      <input type="text" placeholder="失去焦点提示数据" onBlur={this.showData2} ref={currentNode => this.input2 = currentNode} />&nbsp;&nbsp;
                   </div>
               )
            //    箭头函数左边只有一个参数小括号可以省略，右边只有一句话大括号可以省略
           }
       }
       ReactDOM.render(<Demo />,document.getElementById("text"))

createRef

       class Demo extends React.Component{
           myRef = React.createRef() //React.createRef()调用后可以返回一个容器，该容器可以存储被ref所标识的节点，该容器是“专人专用的”
           showData = () =>{
               console.log(this.myRef.current.value)
           }
           render() {
               return (
                   <div>
                      <input type="text" placeholder="点击按钮提示数据" ref={this.myRef} />&nbsp;&nbsp;
                      <button onClick={this.showData}>点击我提示左边的数据</button>&nbsp;&nbsp;
                   </div>
               )
           }
       }
       ReactDOM.render(<Demo />,document.getElementById("text"))