react技术全家桶（20）回调ref中调用次数的问题

最新推荐文章于 2023-03-13 10:48:13 发布

没有女朋友的程序员

最新推荐文章于 2023-03-13 10:48:13 发布

阅读量869

点赞数

文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/weixin_41380194/article/details/122675478

版权

本文探讨了在React中使用ref回调函数时遇到的调用次数问题。通过示例代码展示，当组件状态更新时，ref回调函数的执行情况，并提供了解决方案。文章分析了不同场景下ref的获取及更新行为，包括内联函数的使用和官方推荐的解决策略。

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

研究：ref={currentNode=>this.input1 = currentNode} 这个回调函数回调次数的问题。

代码：
class Demo extends React.Component {
// showData = ()=>{
// const input = document.getElementById(‘input1’);
// alert(input.value);
// }
showData = ()=>{
const{input1} = this
alert(input1.value)
}

        render() {
            return (
                <div>
                    <input ref={(currentNode)=>{this.input1 = currentNode;console.log('@',currentNode)}} type="text" placeholder="点击按钮提示数据"/>
                    <button onClick={this.showData}>点我提示左侧数据</button>
                   
                </div>
            )
        }
    }
    ReactDOM.render(<Demo/>,document.getElementById('test'))