两种输出方式不同

来源：4-7 React 中 ref 的使用

console_man

2019-03-27

render() {
        const {content, name} = this.props;
        return (
            <li className={"down-in"} 
                onClick={this.handleItemDelete}
                ref={this.itemRef}
                onAnimationEnd={this.removeAnimateClass.bind(this)}
            >{content}-{name}</li>
        );
    }
    
handleItemDelete() {
        console.log(this.itemRef.current);
        console.log(this.itemRef.current.innerText);
        this.itemRef.current.classList.add("down-out");
    }

图片描述
老师，上面代码为TodoItem组件的两个主要方法；handleItemDelete是TodoItem组件中单击事件回调函数。
截图为控制台输出。
为什么两次console输出为不一致呢？

写回答

2回答

Dell

2019-03-29

因为每次删除的时候，数据会变，render重新执行，重新对ref赋值，所以它会变的

Dell

2019-03-27

itemRef从哪来的

console_man

constructor(props) { super(props); this.state = {}; this.handleItemDelete = this.handleItemDelete.bind(this); this.itemRef = React.createRef(); } itemRef是在构造函数中通过React.createRef();创建的

2019-03-28

共1条回复

React零基础入门到实战，完成企业级项目简书网站开发

主流新技术 React-redux，React-router4，贯穿基础语法

5275 学习 · 2497 问题

查看课程

相似问题

store.subscribe 执行了两次

回答 1

关于input标签内输入字符的问题

回答 1

希望能有进阶，学完了感觉还是太浅了，不能很好的应对实际项目，打算啃文档了，不知道老师什么时候可以出一个进阶的内容，最好是最新版本贴合企业生产的那种

回答 1

关于全局引入一次和按需引入这两种方式的运行效率问题

回答 1

iconfont引入后使用所有的字体图标都是小正方形,不正常显示

回答 12

打开慕课网App查看更多内容