react如何给input赋值
使用受控组件方式赋值
在React中，推荐使用受控组件（Controlled Component）管理输入框的值。通过value属性和onChange事件实现双向绑定：
import React, { useState } from 'react';
function ControlledInput() {
const [inputValue, setInputValue] = useState('');
const handleChange = (e) => {
setInputValue(e.target.value);
};
return (
<input
type="text"
value={inputValue}
onChange={handleChange}
/>
);
}使用非受控组件方式赋值
通过ref直接访问DOM节点修改值，适用于需要手动触发赋值的场景：
import React, { useRef } from 'react';
function UncontrolledInput() {
const inputRef = useRef(null);
const setValue = () => {
inputRef.current.value = '手动赋值内容';
};
return (
<div>
<input type="text" ref={inputRef} />
<button onClick={setValue}>赋值</button>
</div>
);
}动态设置初始值
通过useEffect在组件挂载或依赖变化时更新输入框的值：
import React, { useState, useEffect } from 'react';
function DynamicInput({ initialValue }) {
const [value, setValue] = useState('');
useEffect(() => {
setValue(initialValue);
}, [initialValue]);
return <input value={value} onChange={(e) => setValue(e.target.value)} />;
}表单场景下的赋值
结合表单提交时通过状态管理统一处理值：
import React, { useState } from 'react';
function FormExample() {
const [formData, setFormData] = useState({ username: '' });
const handleSubmit = (e) => {
e.preventDefault();
console.log('提交的值:', formData.username);
};
return (
<form onSubmit={handleSubmit}>
<input
value={formData.username}
onChange={(e) =>
setFormData({ ...formData, username: e.target.value })
}
/>
<button type="submit">提交</button>
</form>
);
}注意事项
- 受控组件需同时提供
value和onChange，否则输入框会变为只读。 - 直接修改
ref.current.value不会触发React的重新渲染。 - 动态赋值时需确保状态更新与渲染周期同步，避免竞态问题。
