关于ref
来源:2-7 自由编程
Warsun
2020-04-27 22:11:33

老师,我在ref中加入了这句之后,看到控制台是这样显示的
点一下按钮不仅出现dom元素,上面还有个null,这个null是哪里来的?
import React, { Component, Fragment } from 'react';
class ClickAdd extends Component {
constructor(props) {
super(props);
this.state = {
number: 1
}
}
clickAdd(increment) {
let number = this.state.number;
number += increment;
this.setState({number})
}
render() {
// ref 写在html标签上,获取的是dom节点
// ref 写在组件标签上,获取的是组件的js实例
return (
<Fragment>
<div><button
onClick={this.clickAdd.bind(this,2)}
ref={(button) => {
this.button = button;
console.log(this.button);
}}
>点击,数字+2</button></div>
<div>{this.state.number}</div>
</Fragment>
)
}
}
export default ClickAdd;1回答
好帮手慕夭夭
2020-04-28
同学你好,null是console.log(this.button)输出的。原因是当点击按钮数据number改变,组件就会被卸载然后重新挂载。首先组件卸载后,即componentWillMount后,此时参数接收的就是null(注意组件卸载也会触发ref的回调函数),所以会输出null。最后重新挂载之后又执行了一次,输出了dom元素。
如果我的回答帮助到了你,欢迎采纳,祝学习愉快~
相似问题