useRef

了解useRef React hook的用途，以及如何使用它！ 如果您对React hooks还不熟悉，请先查看我的React hooks简介。 我有时会使用一个React hook，那就是useRef。 import React, { useRef } from 'react' 这个hook使我们可以以命令式的方式访问DOM元素。 这是一个例子，我在控制台打印了包含计数值的span元素的DOM引用的值： import React, { useState, useRef } from 'react' const Counter = () => { const [count, setCount] = useState(0) const counterEl = useRef(null) const increment = () => { setCount(count + 1) console.log(counterEl) } return ( <> Count: <span ref={counterEl}>{count}</span> <button onClick={increment}>+</button> </> ) } ReactDOM.render(<Counter />, document.getElementById('app')) 请注意const counterEl = useRef(null)这一行，以及<span ref={counterEl}>{count}</span>。这是设置链接的地方。...

在進行一個項目時，我遇到了一個問題，這個項目是使用 React 構建的表單，並且與瀏覽器的自動填充功能有關。 你知道嗎，當瀏覽器自動填寫你的用戶名/密碼，因為你之前已經輸入過？ 那就是自動填充，這也是我遇到問題的原因。特別是在 Chrome 和 Firefox 上複製這個問題，但任何瀏覽器都可能碰到這個問題。 這個表單是使用 useState 鉤子構建的一個普通而簡單的表單。 這是表單中的一個示例「email」字段： import { useState } from 'react' //... const [email, setEmail] = useState('') <input id='email' type='email' name='email' value={email} onChange={(event) => setEmail(event.target.value)} /> 當你在這個字段中輸入電子郵件時，email 的值會使用 setEmail 進行更新，這樣我就可以在表單提交事件中使用它，然後將它發送到服務器。 在某個時刻，我意識到瀏覽器正在自動填寫電子郵件地址和密碼，但是 React 卻沒有識別到它！ 可能是因為它在 React 完全運行之前就填寫了該字段，所以無法截取該事件。 我進行了一些研究，不同瀏覽器的不一致性和自動填充工作方式的差異讓我感到困惑，因此我不得不創建一個簡單的解決方案。 我使用了 useRef 和 useEffect 來實現它： import { useState, useEffect, useRef } from 'react' 我創建了一個 ref： const emailField = useRef(null) 並將它附加到 JSX 的輸入字段上： <input ref={emailField} id='email' type='email' name='email' value={email} onChange={(event) => setEmail(event....