react 中ref的使用

1. 在此之前，我們使用時(shí)間對(duì)象e.target獲取觸發(fā)該事件的dom元素
2. 在react中我們可以通過(guò)ref來(lái)獲得dom元素
3. 用法
   1. 在需要獲取的dom元素標(biāo)簽中使用ref为鳄。
   2. 寫(xiě)法如下。
   3. 在js中就能直接使用this.div來(lái)得到div這個(gè)dom了敲才。

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

4. 使用ref需要注意的地方。
   1. 通常情況我們?cè)陧?xiàng)目中盡量不要去使用ref择葡，但是有些時(shí)候做動(dòng)畫(huà)效果難免需要用紧武。
   2. 常常出現(xiàn)的一個(gè)坑就是，在你使用setState函數(shù)改變數(shù)據(jù)刁岸，頁(yè)面重新渲染脏里，你在setState函數(shù)后面操作dom她我，往往會(huì)出錯(cuò)虹曙。
   3. 為什么呢？前面我們有講過(guò)番舆，setState函數(shù)是一個(gè)異步函數(shù)酝碳。所以你直接在它后面操作dom，往往dom并不是渲染后的dom恨狈。
   4. 如何避免呢疏哗？setState提供了一個(gè)回調(diào)函數(shù)，我們可以在回調(diào)函數(shù)中進(jìn)行數(shù)據(jù)操作禾怠。

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

class App extends Component {
  constructor(props){
    super(props);
    this.state = {
      inputValue: '',// 用來(lái)存儲(chǔ) input框中的 value值返奉。
      list:[] // 用來(lái)存儲(chǔ) 每一個(gè)li的 value值贝搁。
    }
  }
  handleInputChange = (e) => {
    // const value = e.target.value;
    const value = this.input.value;
    this.setState(() => ({inputValue: value}))//新版的react中的setState()函數(shù)可以接收一個(gè)函數(shù)，箭頭函數(shù)的函數(shù)體使用（）包裹可以省略return
  }
  addList = () => {
    this.setState((prevState) => { // 同時(shí)setState函數(shù)還提供一個(gè)prevState參數(shù)芽偏，這個(gè)參數(shù)代表未改變之前的this.state
      const list = [...prevState.list, prevState.inputValue];
      return {
        list,
        inputValue: '' // 添加完畢以后清空input框
      }
    })
  }
  deletListItem = (index) => { // 因?yàn)樵诮壎ㄔ摲椒ǖ臅r(shí)候使用了bind函數(shù)雷逆，所以這里可以不實(shí)用箭頭函數(shù)去保證this的指向
    this.setState((prevState) => {
      let list = [...prevState.list];
      list.splice(index, 1);
      return {list};
    },() => {
      console.log('item',this.item) // setState函數(shù)的回調(diào)
    })
  }
  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;