react如何给input赋值
在React中给input赋值的方法
使用受控组件（推荐方式）
通过React的state与input的value属性绑定，实现双向数据流控制。每当输入内容变化时，更新state；state的变化又会反映到input的显示值上。
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}
/>
);
}使用非受控组件（通过ref）
通过useRef直接操作DOM元素，适合需要手动触发赋值的场景，但不推荐作为主要数据流方式。
import { useRef } from 'react';
function UncontrolledInput() {
const inputRef = useRef(null);
const handleButtonClick = () => {
inputRef.current.value = 'Programmatic value';
};
return (
<div>
<input type="text" ref={inputRef} />
<button onClick={handleButtonClick}>Set Value</button>
</div>
);
}通过props动态赋值
当input作为子组件时，可以通过父组件传递的props进行赋值控制。
function ParentComponent() {
const [externalValue, setExternalValue] = useState('');
return (
<ChildInput
value={externalValue}
onChange={(val) => setExternalValue(val)}
/>
);
}
function ChildInput({ value, onChange }) {
return (
<input
type="text"
value={value}
onChange={(e) => onChange(e.target.value)}
/>
);
}表单库集成
使用如Formik等表单库时，可通过其提供的Field组件或useField hook自动处理赋值逻辑。
import { Formik, Field } from 'formik';
function FormikExample() {
return (
<Formik initialValues={{ email: '' }}>
<form>
<Field
type="email"
name="email"
// 自动绑定值与变更处理
/>
</form>
</Formik>
);
}注意事项
- 受控组件需配套onChange处理，否则input会变为只读状态
- 直接修改ref.current.value不会触发React的重新渲染
- 对于动态默认值，应在useState初始化或useEffect中设置
