Heim > Fragen und Antworten > Hauptteil
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。