React 中的ref 介紹， 為什么他們很重要

ref 是一個入口 允許您直接訪問DOM元素或組件實例。

為了使用它們，您可以向組件添加一個ref屬性，該屬性的值是一個回調函數，它將接收底層的DOM元素或組件的已掛接實例作為其第一個參數。

class UnControlledForm extends Component {
  handleSubmit = () => {
    console.log("Input Value: ", this.input.value)
  }
  render () {
    return (
      <form onSubmit={this.handleSubmit}>
        <input
          type='text'
          ref={(input) => this.input = input} />
        <button type='submit'>Submit</button>
      </form>
    )
  }
}

以上注意到我們的輸入字段有一個ref屬性，其值是一個函數。該函數接收我們然后放在實例上的實際的DOM元素，以便在handleSubmit函數內部訪問它。

經常誤解，您需要使用類組件才能使用參考，但是參考也可以通過利用JavaScript中的閉包與功能組件一起使用。

function CustomForm ({handleSubmit}) {
  let inputElement
  return (
    <form onSubmit={() => handleSubmit(inputElement.value)}>
      <input
        type='text'
        ref={(input) => inputElement = input} />
      <button type='submit'>Submit</button>
    </form>
  )
}