react如何获取输入框的值
获取输入框值的常用方法
受控组件方式
通过useState管理输入框的值，将状态与输入框的value属性绑定，监听onChange事件更新状态：
import { useState } from 'react';
function InputExample() {
const [inputValue, setInputValue] = useState('');
const handleChange = (e) => {
setInputValue(e.target.value);
};
return (
<input
type="text"
value={inputValue}
onChange={handleChange}
/>
);
}非受控组件方式
使用useRef直接获取DOM元素，通过ref.current.value访问值：
import { useRef } from 'react';
function RefExample() {
const inputRef = useRef(null);
const handleClick = () => {
alert(inputRef.current.value);
};
return (
<>
<input type="text" ref={inputRef} />
<button onClick={handleClick}>获取值</button>
</>
);
}表单提交场景的处理
表单提交时获取值
在表单的onSubmit事件中通过事件对象获取：
function FormExample() {
const handleSubmit = (e) => {
e.preventDefault();
const value = e.target.elements.inputName.value;
console.log(value);
};
return (
<form onSubmit={handleSubmit}>
<input name="inputName" type="text" />
<button type="submit">提交</button>
</form>
);
}动态输入框处理
多个输入框的场景
使用对象管理多个输入框状态，通过name属性区分：
function MultiInputExample() {
const [formData, setFormData] = useState({
username: '',
password: ''
});
const handleChange = (e) => {
const { name, value } = e.target;
setFormData(prev => ({ ...prev, [name]: value }));
};
return (
<>
<input
name="username"
value={formData.username}
onChange={handleChange}
/>
<input
name="password"
value={formData.password}
onChange={handleChange}
/>
</>
);
}注意事项
- 受控组件适合需要实时验证或即时反馈的场景
- 非受控组件适合需要手动触发获取值的场景
- 动态表单推荐使用对象管理状态以减少重复代码
