Day 12 - 那个被我忘记的 ref / useRef / createRef 上

如果有错误，欢迎留言指教~ Q_Q 还没写完辣

对的 我一直只记得 ref 是取得的 DOM 的一种偷懒方式

因为在 vue 里面，我也只是这麽用der ><

ref 可以让我们取得 DOM

<input> 设定 ref={inputRef}

当画面上找到 inputRef 後
ref 的 current 就会 callback 相对应的 DOM 节点 : <input type="text"></input>
当确定他们存在，就可以去控制拉~~~

例如控制 input 的 focus

const inputRef = useRef(null);
console.log(inputRef);
// -> { current: null }

<input
    type="text"
    ref={(ref) => {
      ref.focus();
      console.log(ref);
      // -> <input type="text"></input>
    }}
/>

import React, { useRef } from "react";

export default function App() {
  const inputRef = useRef(null);

  return (
    <div className="App">
      <input type="text" ref={inputRef} />
      <button
        onClick={() => {
          inputRef.current && inputRef.current.focus();
        }}
      >
        focus input
      </button>
    </div>
  );
}

参考连结：

1. https://zh-hant.reactjs.org/docs/hooks-reference.html#useref
2. https://zh-hant.reactjs.org/docs/hooks-faq.html#is-there-something-like-instance-variables
3. https://zh-hant.reactjs.org/docs/refs-and-the-dom.html