P粉4690907532023-09-01 14:07:48
在 React.js 中,使用 querySelector 等方法直接操作 DOM 並設定輸入元素的值可能無法反映 DOM 中的預期變更。這是因為 React 有自己的虛擬 DOM (VDOM),它可以用來有效地更新實際 DOM。
React 鼓勵您管理元件的狀態,並讓 React 為您處理 DOM 的更新,而不是直接操作 DOM。以下是如何在 React 中實現所需行為的方法:
使用 useState 鉤子宣告一個狀態變數:
import React, { useState } from 'react'; function MyComponent() { const [inputValue, setInputValue] = useState(''); // ... }
當你想要改變輸入框的值時,更新inputValue狀態變數:
setInputValue("blablablabla");
使用 inputValue 狀態變數渲染輸入元素:
<input type="text" value={inputValue} onChange={e => setInputValue(e.target.value)} />
透過此方法,React 將管理輸入元素的狀態,並在狀態變更時自動更新 DOM。