美文网首页
react ref -setState-nextTick

react ref -setState-nextTick

作者: 云高风轻 | 来源:发表于2021-12-02 23:57 被阅读0次

1. 前言

vue中的 nexTick,其实在react中有类似的东西
就是常用的 setState


2. ref

1.简单在回顾下ref的用法
2.可以绑定箭头函数 参数默认就是当前的标签对象

 class App extends React.Component{
        constructor(props){
            super(props);
            // 存放状态
            this.state={
              msg:"hello"
            }
        }
        render(){
            // 模板
            return(
                <div>
                    {/*添加ref标识*/}
                    <h1 ref={el=>this.testRef=el}>App</h1>
                    <button onClick={()=>this.setText()}>按钮</button>
                </div>
            )
        }
        setText(){
           this.setState({
                msg:"world"
            })
// 获取的是就内容
            console.log(this.testRef.innerHTML);
        }
    }

3. 获取修改后的内容

1.nextTick 自己回顾vue
2.setState 第二个参数是是回调函数 视图更新完毕调用

            this.setState({
                msg:"world"
            },()=>{//视图更新完毕的回调函数
                console.log(this.title.innerHTML);
            })

参考资料


初心

我所有的文章都只是基于入门,初步的了解;是自己的知识体系梳理;如有错误,欢迎交流;
如果能帮助到有缘人,非常的荣幸,一切为了部落的崛起;
共勉

相关文章

  • react ref -setState-nextTick

    1. 前言 vue中的 nexTick,其实在react中有类似的东西就是常用的 setState 2. ref ...

  • react-ref

    ref:react对真实dom的引用 ref在reactElement上 ref在react组件上

  • React中ref的使用

    React中Ref是什么? ref是React提供的用来操纵React组件实例或者DOM元素的接口。 ref的作用...

  • 如何使用React Refs

    如何在React中利用ref以及ref转发,回调ref和HOC React Ref是有用的功能,可作为从父组件中引...

  • React学习笔记(三)

    React中的 ref 的使用 ref是一个引用,在React中使用ref来直接获取DOM元素从而操作DOM Re...

  • React 中 ref 的使用

    ref是reference的简写,它是一个引用,在react中,我们使用ref来操作DOM。 在react中,我们...

  • React 中的转发ref

    在 React V16.3� 中react引入了: React.forward((props, ref) => R...

  • React refs

    1.React.createRef() React.createRef可以给Dom元素添加ref。React.cr...

  • react ref

    在 React16 新版本中,新引入了 React.createRef 与 React.forwardRef 两个...

  • react ref

    转载React ref的用法[https://www.cnblogs.com/mengff/p/9554779.h...

网友评论

      本文标题:react ref -setState-nextTick

      本文链接:https://www.haomeiwen.com/subject/udxpxrtx.html