iT邦幫忙

2021 iThome 鐵人賽

DAY 23
0
Modern Web

白話JavaScript系列 第 24

Day24-操作DOM

前言

在React中通常我們並不會直接操作到DOM元素。

但有些情況反而需要操作DOM元素,來使使用者體驗便更好。

useRef

  • 由於直接操作DOM,React並不知道狀態改變

syntax

const refContainer = useRef(initialValue);

照慣例先把useRef打印出來

https://ithelp.ithome.com.tw/upload/images/20210921/20130419L3RciFnbxd.png

可以看到它是一個物件,並且要存取current才能取得value。


接下來我們實作如何讓使用者focus在表單中

當使用者點擊button,會操作DOM元素達到focus效果

而我們必須把useRef綁定在表單的ref身上。

這邊我們不需要使用current屬性,因為React會自動幫我們取得current屬性。

https://ithelp.ithome.com.tw/upload/images/20210921/20130419gVG1h2RjnZ.png

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

上一篇
Day23-資料操作
下一篇
Day25-memo
系列文
白話JavaScript28

尚未有邦友留言

立即登入留言