React自制全家桶React使用ref操作DOM与setState遇到的问题
Posted piaobodewu
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了React自制全家桶React使用ref操作DOM与setState遇到的问题相关的知识,希望对你有一定的参考价值。
在React中同时使用ref操作DOM与setState常常会遇到
比如操作的DOM是setState更新之前的DOM内容,与想要的操作不一致。导致这样的原因是setState函数是异步函数。
就是当ref的操作执行结束后,可能setState函数才执行。
解决方案:
将有关ref操作的放在setState函数的回调函数里。代码示例:
handleBtnClick(){
//不能用this,因为此时this指向它绑定的按钮,并且不能直接用这个this.state,永远不要直接修改this.state
// this.state.list.push(‘hello world‘);
this.setState((prevState)=>({
// ...为展开运算符
list:[...prevState.list,prevState.inputValue],
inputValue:‘‘
}),()=>{
console.log(this.ul.querySelectorAll(‘div‘).length);
// 回调函数
})
// 注意setState为异步函数,相当于console执行后等一会setState才执行
}
如代码所示,console.log的位置就是回调函数的位置,该回调函数在setState执行完毕后才执行
以上是关于React自制全家桶React使用ref操作DOM与setState遇到的问题的主要内容,如果未能解决你的问题,请参考以下文章
react自制全家桶Webstrom+React+Ant Design+echarts搭建react项目
ReactReact全家桶React 生命周期+虚拟DOM+Diff算法