关于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元素。
如果我的回答帮助到了你,欢迎采纳,祝学习愉快~
相似问题