iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 6
0
自我挑戰組

請你當我的好朋友吧!ReactJS!系列 第 6

【DAY 06】React!還有?refs你別來好不?

【前言】
  前兩篇講到props、state,可是阿,有時候看到滿滿jquery的特效就很想拿來react用,可是jquery那些都要直接對實體DOM做操作;抑或是想對input欄位抓取value、使用focus()這些方法,但react本身就是virtual DOM,是要怎樣讓他們抓到啦?難不成只能忍痛放棄炫砲的網頁嗎......

【正文】
  為了解決上面這個問題,react提出一種Refs概念,使用這個方法,我們就可以抓取到react裡面的DOM元素,那有什麼樣的時機可以嘗試用用看Refs呢?

  1. Managing focus, text selection, or media playback. // 想要使用input的foucs(),video的play()
  2. Triggering imperative animations. // 要觸發一些動畫
  3. Integrating with third-party DOM libraries. // 集結第三方DOM Library,如jquery

  當然有些人想說,有了ref之後,我基本上就可以把react component DOM內的元素當成實體DOM,那也就是我可以任意用囉,理論和實作上也不是不行,只是這樣就失去react當初設計的用意了,如果當你在實作一個功能的時候,如果可以利用props及state就可以達到的方法的話,那就盡量用props和state完成,即是「非必要情況,盡量避免用refs」。

 那在今天的練習會利用refs去做些簡單的代辦清單,程式碼如下:

  • App.js
import React from 'react';

class App extends React.Component {
  constructor(props) { // 在建構函式設定state的初始值
    super(props);
    this.state = {
      itemList: [],
    };
    this.addFiled = React.createRef(); // 在建構函式創建refs屬性
  }

  addItem = () => { // 利用arrow function additem function
    const { itemList } = this.state;
    // 利用ES6 Object.assign()拷貝itemList
    const tempList = Object.assign([], itemList);
    // 抓取inputDOM元素的value值,在ref的current屬性
    if (this.addFiled.current.value !== '') {
      // array.push新值,這會回傳一個陣列長度
      tempList.push(this.addFiled.current.value);
      // 利用setState更新state的值
      this.setState({
        itemList: tempList,
      });
      // 把input的value變回空字串
      this.addFiled.current.value = '';
    }
  }

  render() {
    const { itemList } = this.state;
    return ( 
      <div style={{ textAlign: 'center', width: '300px' }}>
        {/* 在你想要參考的地方增加ref屬性 */}
        <input type="text" name="addField" ref={this.addFiled} />
        <button type="button" onClick={this.addItem}>ADD</button>
        <ul style={{ textAlign: 'left' }}>
          { itemList.map((item, index) => <li key={`item_${index}`}>{item}</li>) }
        </ul>
      </div>
    );
  }
}

export default App;

  實作效果如下:
畫面

  這樣有沒有稍稍了解了refs了呢?明天我們來說說Component的lifeCycle吧!


上一篇
【DAY 05】React!說,State又是誰啊?
下一篇
【DAY 07】React Component也有生老病死?(上)
系列文
請你當我的好朋友吧!ReactJS!30

尚未有邦友留言

立即登入留言