昨天我們利用refs順利的取得了input的值。用法如下,就是將ref="input"放到input標籤裡面而已。

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

但是，翻了一下react的文件，卻看到這麼一段話

如果你正在使用 this.refs.textInput 來取得 ref，我們建議使用 callback 的方式或 createRef API。

當 ref 屬性是字串的時候，例如 "textInput"，然後 DOM 節點被當作 this.refs.textInput 來取得。我們不建議使用它，因為 string ref 有一些問題，所以他被視為 legacy，且很有可能會在未來的版本被移除。

也就是說，目前的寫法快要被時代淘汰了，那麼就來看看文件說的解決方法吧！

ref-callback

那麼就還撰寫回呼函式的方法吧，一樣，長長的code就先掠過就好了。

class App extends React.Component {
  setTextInputRef = (c) =>{
    console.log(c)
    this.input01 = c
  }
  showInput = () =>{
    let input01 = this.input01.value
    console.log(input01)
  }
  render() {
    return (
      <div>
        <input
          type="text"
          ref={this.setTextInputRef}
        />
        <button onClick={this.showInput}>點我</button>
      </div>
    );
  }
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <App/>,
);

既然react說字串要被淘汰了，那要改成甚麼寫法呢？
就是當初綁定事件一樣，把function丟給ref，讓ref去調用這個fuction。

    return (
      <div>
        <input type="text" ref={this.setTextInputRef} />
        <button onClick={this.showInput}>點我</button>
      </div>
    );

那麼，我們就要來建立這個叫做this.setTextInputRef的function。
在這個function我們接了一個c，如果把她console.log出來，就是這一段：。
所以我們就可以直接把他放如我們想要放的變數裡頭。

    setTextInputRef = (c) =>{
        console.log(c)
        this.input01 = c
    }

接著透過一個點擊事件我們把它印出來。
.vlaue就是input的值，偶爾大家會忘記，再強調一下。

  showInput = () =>{
    let input01 = this.input01.value
    console.log(input01)
  }

那麼到現在，我們也就學會了如何使用callback的方式來使用ref了。

createRef API

接下來，我們要使用react的新API，createRef。

class App extends React.Component {
  myRef = React.createRef()
  showInput = () =>{
    let input01 = this.myRef.current.value
    console.log(input01)
  }
  render() {
    return (
      <div>
        <input type="text" ref={this.myRef} />
        <button onClick={this.showInput}>點我</button>
      </div>
    );
  }
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <App/>,
);

其實跟剛剛callback的寫法很像，
<input type="text" ref={this.myRef} />
雖然我在這裡把{}裡面改成this.myRef，但繼續叫做this.setTextInputRef也無所謂，就是一個命名。

重點是下面這一句，我們要用react的規範創立一個ref，非常快速。

myRef = React.createRef()

要注意的是，取值的時候必須加一個current，這樣就可以取得input的值了。

  showInput = () =>{
    let input01 = this.myRef.current.value
    console.log(input01)
  }

那麼我們今天，就大致的把ref講過一輪了。明天見！