关于ref

来源:2-7 自由编程

Warsun

2020-04-27 22:11:33

http://img.mukewang.com/climg/5ea6e79709f3730404470223.jpg

老师,我在ref中加入了这句之后,看到控制台是这样显示的

http://img.mukewang.com/climg/5ea6e7ce0927e38413950277.jpg点一下按钮不仅出现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元素。

如果我的回答帮助到了你,欢迎采纳,祝学习愉快~

0

0 学习 · 10739 问题

查看课程