美文网首页
react学习(17)回调形式的ref

react学习(17)回调形式的ref

作者: 哆啦C梦的百宝箱 | 来源:发表于2022-08-18 15:47 被阅读0次
<script type="text/babel">
        class Demo extends React.Component {
            render(){
                return (
                    <div>
                        <input type='text' ref={c=>this.input1 =c}/>&nbsp;
                        <button onClick={this.showDemo}>点击显示内容</button>
                    </div>
                )
            }
            showDemo=()=>{
                alert(this.input1.value);
            }
        }
        ReactDOM.render(<Demo/>,document.getElementById('test'));
    </script>

1:首先回调函数是指:自己定义了一个函数,并且这个函数不是自己调用且执行了,ref的回调函数是react帮忙执行。其中c是当前标签节点,this.input1中的this是组件实例对象。那么this.input1 =c;的含义就是往组件实例对象身上添加一个input1属性,并且值为标签节点。
2:回调形式的ref回调执行次数:如果写成内联函数的形式,在更新页面的时候,函数会调用两次。如果写成class的绑定函数的形式,就不会出现这种情况。但是大多数情况这是无关紧要的。

<input type='text' ref={this.saveInput}/>
saveInput=(c)=>{
    this.input1 = c;
}

相关文章

  • react学习(17)回调形式的ref

    1:首先回调函数是指:自己定义了一个函数,并且这个函数不是自己调用且执行了,ref的回调函数是react帮忙执行。...

  • React基础篇之组件组件实例三大属性refs

    字符串形式的ref 回调函数形式的ref 回调ref中回调执行次数的问题 createRef的使用 上一篇:Rea...

  • 如何使用React Refs

    如何在React中利用ref以及ref转发,回调ref和HOC React Ref是有用的功能,可作为从父组件中引...

  • react的ref属性

    ref在react里面总共有3种写法:字符串形式,回调函数形式,createRef。 1.字符串形式(该形式已经被...

  • react 之 ref

    React的ref有3种用法: 字符串(已废弃) 回调函数 React.createRef() (React16....

  • react中ref的两种使用方法

    ref一共有两种使用方式 回调函数形式(官方推荐) string形式 第一种 回调函数形式 回调函数形式一共有三种...

  • react学习(18)createRef形式的ref

    1:React.createRef调用之后会返回一个容器,该容器可以存储被ref标识的节点,但是要注意,只能一个容...

  • 3.React中的refs属性的作用是什么?

    Refs是React提供给我们安全的访问DOM元素或者某个组件实例的句柄,我们可以为元素添加ref属性然后在回调函...

  • React函数式组件使用Ref

    目录: 简介 useRef forwardRef useImperativeHandle 回调Ref 简介 大家都...

  • react-ref

    ref:react对真实dom的引用 ref在reactElement上 ref在react组件上

网友评论

      本文标题:react学习(17)回调形式的ref

      本文链接:https://www.haomeiwen.com/subject/sxsjgrtx.html