Day24-操作DOM

前言

在React中通常我们并不会直接操作到DOM元素。

但有些情况反而需要操作DOM元素，来使使用者体验便更好。

useRef

• 由於直接操作DOM，React并不知道状态改变

syntax

const refContainer = useRef(initialValue);

照惯例先把useRef打印出来

可以看到它是一个物件，并且要存取current才能取得value。

接下来我们实作如何让使用者focus在表单中

当使用者点击button，会操作DOM元素达到focus效果

而我们必须把useRef绑定在表单的ref身上。

这边我们不需要使用current属性，因为React会自动帮我们取得current属性。

import React, {useRef} from 'react'
function App() {
  let inputRef = useRef(null)
  
  return (
    <div>
      <input ref={inputRef} /> //binding the element
      <button onClick={() => inputRef.current.focus()}>Focus</button>
    </div>
  )
}

export default App