react 笔记04

以下纯属笔记，这些技术胖视频有 

ref的使用方法

 以前的案例中，我们写了下面的代码，使用了e.target，这并不直观，也不好看。这种情况我们可以使用ref来进行解决。

inputChange(e){
    this.setState({
        inputValue:e.target.value
    })
}

如果要使用ref来进行，需要现在JSX中进行绑定， 绑定时最好使用ES6语法中的箭头函数，这样可以简洁明了的绑定DOM元素

<input 
    id="jspang" 
    className="input" 
    value={this.state.inputValue} 
    onChange={this.inputChange.bind(this)}
    //关键代码——----------start
    ref={(input)=>{this.input=input}}
    //关键代码------------end
    />

inputChange(){
    this.setState({
        inputValue:this.input.value
    })
}

ref需要等DOM渲染完成后才能获取到， 但是React中更多setState是一个异步函数，代码执行是有一个时间的，要使用它的回调函数来执行

addList(){
    this.setState({
        list:[...this.state.list,this.state.inputValue],
        inputValue:''
        //关键代码--------------start
    },()=>{
        console.log(this.ul.querySelectorAll('div').length)
    })
    //关键代码--------------end
}