React的ref的使用

例一：获取输入框输入的信息，代替e.target.value

<div>
          <label htmlFor='addService'>项目名称</label>
          <input 
                id='addService' 
                ref={(input)=>{this.input=input}}
                className='input' 
                value={this.state.inputValue} 
                onChange={this.inputChange.bind(this)} /> 
         <button onClick={this.addItem.bind(this)}> 添加项目</button>
 </div>


 inputChange(e){
        console.log(e.target.value); 
        this.setState({
            // inputValue: e.target.value // 第一种写法
            inputValue: this.input.value  // ref写法
        })
    }

例二：获取文档中某DOM节点的所有元素

<ul ref={(ul)=>{this.ul = ul}}>
        {
            this.state.list.map((item,index)=>{
                  return (
                     <Item content={item} 
                           key={index+item}
                           index={index}
                           deleteItem={this.deleteItem.bind(this)}
                             />
                    )
             })
      }
 </ul> 
addItem(){
    // this.setState是异步加载的，ul下边的li动态加载以后，需要用this.setState的回调函数里去统计所有元素
    this.setState({
       list:  [...this.state.list,this.state.inputValue],
            inputValue: ''
     },()=>{
            console.log(this.ul.querySelectorAll('li').length,'1111')
     })
     console.log(this.ul.querySelectorAll('li').length,'2222') // 在这打印是错误的数据，需要在this.setState的回调函数里打印
 }