zoukankan      html  css  js  c++  java
  • setState的回调

    setState是异步的

    如果想操作dom一定要在setState的回调里

    例子:

    获得ul里li元素的个数

    import React, { Component } from 'react';
    class Test extends Component {
        constructor(props) {
            super(props);
            this.state = { 
                list:[1,2,3],
                inputValue:''
             }
        }
        handleChange=(e)=>{
             
            this.setState({
                inputValue:e.target.value
            })
        }
    
        handleAdd =()=>{
            let newList = [...this.state.list]
            this.setState({
                list:[...newList,this.state.inputValue],
                inputValue:''
            },()=>{
                // 获取li的个数
                let ul = document.querySelectorAll('ul')
                let childNodes = [...ul][0].childNodes
                console.log(childNodes.length);
            })
          
    
            // 获取li的个数 (错误方法,不应该写在这里,而是写在setState的回调里,因为setState是异步的)
            let ul = document.querySelectorAll('ul')
            let childNodes = [...ul][0].childNodes
            console.log(childNodes.length);
            
            
            
            
        }
        render() { 
            return (  
                <div>
                    <input  value={this.state.inputValue} onChange={this.handleChange} />
                    <button onClick={this.handleAdd}>添加</button>
                    <ul ref={ul=>this.ul=ul}>
                      {
                            this.state.list.map((v,i)=>{
                              return   <li key={i}>{v}</li>
                          })
                      }
                    </ul>
                </div>
            );
        }
    }
     
    export default Test;
  • 相关阅读:
    基因id转换
    Trinity的分步运行
    免费的稳定的SVN托管的服务器
    游戏化
    一个华裔男孩在美国的成长之路
    你懂USB和Type-C吗
    ios调试小技巧
    swift开发笔记19
    iOS 3DTouch应用
    iCloud实现APP多设备数据同步
  • 原文地址:https://www.cnblogs.com/luguankun/p/13964944.html
Copyright © 2011-2022 走看看