(確診第三天，感覺自己要把google上面寫的症狀都經歷一輪了，哭)

還記得我最初學前端的時候，我覺得重點就是把網頁切得美美的，表單甚麼的，看起來如此無趣就先算了吧？
結果實際上在做專案的時候才發現，我的人生就是不斷的在跟表單奮鬥，世界總是如此的不如大家所願。

所以我逃來逃去，今天還是要來討論表單。

以下是一個非常簡單的案例來操作react的input。
首先，我們用jsx創建了input跟button，並且有一個showData()的方法，把我們input的值取出來。
一切都是如此的輕鬆寫意，唯一的問題就是：ref="input"這是啥？
那就老樣子囉？

1. 這是甚麼？
2. 這要拿來幹嘛？
3. 為什麼要這個東西？

class NameForm extends React.Component {

  showData = () =>{
    console.log(this.refs.input.value)
  }
  render() {
    return (
      <div>
        <input ref="input" type="text"/>
        <button onClick={this.showData}>點</button>
      </div>
    );
  }
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<NameForm />);

Ref

react是這麼說的：

Ref 提供了一種可以取得 DOM 節點或在 render 方法內建立 React element 的方式。

甚麼意思呢？
意思就是，透過Ref，我們可以抓到input本身，就是這一段：<input type="text">。

但其實，我們也可以用原生地js方法抓取element，沒錯！！就是這個：Document.getElementById()，但就跟事件綁定一樣，react提供了我們方法來取代他，那就是Ref。

所以透過ref我們可以抓取到input的value。

DOREMESO！我們就可以來回答問題啦！

1. 這是甚麼？
   這是一個可以抓取html element的方法
2. 這要拿來幹嘛？
   拿來取代Document.getElementById()等直接操作dom的方法來抓取element
3. 為什麼要這個東西？
   我......我不知道啦！
   我不知道為什麼凡是透過Document.getElementById()可以做到的事情，react就會透過別的方法來取代他！

但目前只是第一階段，明天還是會繼續寫如何好好的操作表單！