react如何获取表单内的值
受控组件方式
在React中，通过受控组件获取表单值是最推荐的方式。将表单元素的值与React组件的state绑定，通过onChange事件更新state。
import { useState } from 'react';
function Form() {
const [inputValue, setInputValue] = useState('');
const handleChange = (e) => {
setInputValue(e.target.value);
};
const handleSubmit = (e) => {
e.preventDefault();
console.log('Submitted value:', inputValue);
};
return (
<form onSubmit={handleSubmit}>
<input
type="text"
value={inputValue}
onChange={handleChange}
/>
<button type="submit">Submit</button>
</form>
);
}非受控组件方式
使用useRef钩子直接访问DOM元素获取值。这种方式适用于需要快速集成非React代码或第三方库的场景。
import { useRef } from 'react';
function Form() {
const inputRef = useRef(null);
const handleSubmit = (e) => {
e.preventDefault();
console.log('Submitted value:', inputRef.current.value);
};
return (
<form onSubmit={handleSubmit}>
<input
type="text"
ref={inputRef}
/>
<button type="submit">Submit</button>
</form>
);
}多字段表单处理
对于包含多个输入字段的表单，可以采用以下两种方式管理状态。
方式一：为每个字段创建独立state
const [username, setUsername] = useState('');
const [password, setPassword] = useState('');
// 每个字段单独处理
<input
type="text"
value={username}
onChange={(e) => setUsername(e.target.value)}
/>方式二：使用单个对象state
const [formData, setFormData] = useState({
username: '',
password: ''
});
// 统一处理所有字段
const handleChange = (e) => {
setFormData({
...formData,
[e.target.name]: e.target.value
});
};
<input
type="text"
name="username"
value={formData.username}
onChange={handleChange}
/>表单库方案
对于复杂表单场景，可以考虑使用专业表单库如Formik或React Hook Form。这些库提供了验证、错误处理等高级功能。
React Hook Form示例
import { useForm } from 'react-hook-form';
function Form() {
const { register, handleSubmit } = useForm();
const onSubmit = (data) => {
console.log(data);
};
return (
<form onSubmit={handleSubmit(onSubmit)}>
<input {...register('username')} />
<input {...register('password')} type="password" />
<button type="submit">Submit</button>
</form>
);
}
