react如何获取vaule值
获取表单元素的值
在React中获取表单元素的值，可以通过受控组件（Controlled Components）或非受控组件（Uncontrolled Components）两种方式实现。
受控组件方式
受控组件将表单元素的值与React组件的状态绑定，通过onChange事件更新状态，从而直接获取值。
import { useState } from 'react';
function Form() {
const [inputValue, setInputValue] = useState('');
const handleChange = (e) => {
setInputValue(e.target.value);
};
const handleSubmit = (e) => {
e.preventDefault();
console.log('Input value:', inputValue); // 直接获取状态值
};
return (
<form onSubmit={handleSubmit}>
<input
type="text"
value={inputValue}
onChange={handleChange}
/>
<button type="submit">Submit</button>
</form>
);
}非受控组件方式
非受控组件通过ref直接访问DOM元素的值，适用于无需实时状态管理的场景。
import { useRef } from 'react';
function Form() {
const inputRef = useRef(null);
const handleSubmit = (e) => {
e.preventDefault();
console.log('Input value:', inputRef.current.value); // 通过ref获取值
};
return (
<form onSubmit={handleSubmit}>
<input
type="text"
ref={inputRef}
/>
<button type="submit">Submit</button>
</form>
);
}获取多表单字段的值
对于多个表单字段，可以统一管理状态或使用FormData对象（非受控方式）。
受控组件示例
const [formData, setFormData] = useState({ name: '', email: '' });
const handleChange = (e) => {
setFormData({
...formData,
[e.target.name]: e.target.value
});
};
// 提交时直接使用formData
console.log('Form data:', formData);非受控组件示例
const formRef = useRef(null);
const handleSubmit = (e) => {
e.preventDefault();
const data = new FormData(formRef.current);
console.log('Name:', data.get('name'));
console.log('Email:', data.get('email'));
};
return (
<form ref={formRef} onSubmit={handleSubmit}>
<input type="text" name="name" />
<input type="email" name="email" />
</form>
);注意事项
- 受控组件更适合需要实时验证或动态交互的表单。
- 非受控组件更简单，但可能违背React的数据流原则。
- 对于文件输入（
<input type="file" />），必须使用非受控方式。
根据需求选择合适的方法即可。
