react如何动态设置input的值
动态设置 input 值的方法
在 React 中，动态设置 input 的值通常需要结合状态管理（如 useState）和受控组件（controlled component）的概念。以下是几种常见方法：
使用受控组件
通过 value 属性和 onChange 事件绑定状态，实现双向数据绑定：
import { useState } from 'react';
function ControlledInput() {
const [inputValue, setInputValue] = useState('');
const handleChange = (e) => {
setInputValue(e.target.value);
};
return (
<input
type="text"
value={inputValue}
onChange={handleChange}
/>
);
}通过外部数据动态更新
当需要根据 props 或其他状态更新 input 值时，可使用 useEffect 监听变化：
import { useState, useEffect } from 'react';
function DynamicInput({ initialValue }) {
const [value, setValue] = useState('');
useEffect(() => {
setValue(initialValue); // 当 initialValue 变化时更新 input
}, [initialValue]);
return <input value={value} onChange={(e) => setValue(e.target.value)} />;
}使用 ref 非受控方式
若需手动设置 input 值（非受控组件），可通过 useRef 直接操作 DOM：
import { useRef } from 'react';
function UncontrolledInput() {
const inputRef = useRef();
const setInputValue = (newValue) => {
if (inputRef.current) {
inputRef.current.value = newValue;
}
};
return (
<>
<input ref={inputRef} type="text" />
<button onClick={() => setInputValue('New Value')}>
设置值
</button>
</>
);
}动态表单场景
处理多个动态 input 时，可通过对象或数组管理状态：
function MultiInputForm() {
const [formData, setFormData] = useState({
username: '',
email: ''
});
const handleChange = (e) => {
const { name, value } = e.target;
setFormData(prev => ({ ...prev, [name]: value }));
};
return (
<>
<input
name="username"
value={formData.username}
onChange={handleChange}
/>
<input
name="email"
value={formData.email}
onChange={handleChange}
/>
</>
);
}注意事项
- 受控组件需同时提供
value和onChange，否则 input 会变为只读。 - 直接修改 ref 的
value不会触发 React 的重新渲染。 - 动态更新时应考虑性能，避免不必要的重新渲染。
