react 中ref的使用

1. 在此之前，我们使用时间对象e.target获取触发该事件的dom元素
2. 在react中我们可以通过ref来获得dom元素
3. 用法
   1. 在需要获取的dom元素标签中使用ref。
   2. 写法如下。
   3. 在js中就能直接使用this.div来得到div这个dom了。

    render(){
        return(
            <div ref={(div) => { this.div = div}}></div>
        )
    }    

4. 使用ref需要注意的地方。
   1. 通常情况我们在项目中尽量不要去使用ref，但是有些时候做动画效果难免需要用。
   2. 常常出现的一个坑就是，在你使用setState函数改变数据，页面重新渲染，你在setState函数后面操作dom，往往会出错。
   3. 为什么呢？前面我们有讲过，setState函数是一个异步函数。所以你直接在它后面操作dom，往往dom并不是渲染后的dom。
   4. 如何避免呢？setState提供了一个回调函数，我们可以在回调函数中进行数据操作。

import React, { Component, Fragment }from 'react';
import Item from './item.js'

class App extends Component {
  constructor(props){
    super(props);
    this.state = {
      inputValue: '',// 用来存储 input框中的 value值。
      list:[] // 用来存储 每一个li的 value值。
    }
  }
  handleInputChange = (e) => {
    // const value = e.target.value;
    const value = this.input.value;
    this.setState(() => ({inputValue: value}))//新版的react中的setState()函数可以接收一个函数，箭头函数的函数体使用（）包裹可以省略return
  }
  addList = () => {
    this.setState((prevState) => { // 同时setState函数还提供一个prevState参数，这个参数代表未改变之前的this.state
      const list = [...prevState.list, prevState.inputValue];
      return {
        list,
        inputValue: '' // 添加完毕以后清空input框
      }
    })
  }
  deletListItem = (index) => { // 因为在绑定该方法的时候使用了bind函数，所以这里可以不实用箭头函数去保证this的指向
    this.setState((prevState) => {
      let list = [...prevState.list];
      list.splice(index, 1);
      return {list};
    },() => {
      console.log('item',this.item) // setState函数的回调
    })
  }
  getItem = () => {
    return (
      this.state.list.map((item, index) => {
        return(
          <Item 
          key = {index}
          value = {item} 
          index = {index}
          deletItem = {this.deletListItem}
          ref = {(item) => {this.item = item} }
          ></Item>
        )
      })
    )
  }
  render(){
    return (
      <Fragment>
      <div>
        <input
        onChange = { this.handleInputChange }
        value = {this.state.inputValue} 
        ref = {(input) => {this.input = input}}
        />
        <button onClick = { this.addList }>提交</button>
      </div>
      <ul>
        {this.getItem()}
      </ul>
      </Fragment>
    );
  }
}
export default App;