react如何创建表单
创建表单的基本结构
在React中创建表单可以通过<form>标签结合状态管理实现。使用useState钩子存储表单数据，并通过onChange事件更新状态。
import { useState } from 'react';
function MyForm() {
const [formData, setFormData] = useState({
username: '',
password: ''
});
const handleChange = (e) => {
const { name, value } = e.target;
setFormData(prev => ({ ...prev, [name]: value }));
};
const handleSubmit = (e) => {
e.preventDefault();
console.log('Submitted:', formData);
};
return (
<form onSubmit={handleSubmit}>
<input
type="text"
name="username"
value={formData.username}
onChange={handleChange}
/>
<input
type="password"
name="password"
value={formData.password}
onChange={handleChange}
/>
<button type="submit">Submit</button>
</form>
);
}表单验证
通过条件判断或第三方库（如yup、formik）实现验证逻辑。以下示例展示基础验证：
const [errors, setErrors] = useState({});
const validate = () => {
const newErrors = {};
if (!formData.username) newErrors.username = 'Username is required';
if (formData.password.length < 6) newErrors.password = 'Password too short';
setErrors(newErrors);
return Object.keys(newErrors).length === 0;
};
const handleSubmit = (e) => {
e.preventDefault();
if (validate()) {
console.log('Valid form:', formData);
}
};
// 在输入框下方显示错误
{errors.username && <div style={{ color: 'red' }}>{errors.username}</div>}使用受控组件
React推荐使用受控组件（Controlled Components），即表单元素的值由React状态驱动。通过value和onChange实现双向绑定。
<textarea
name="description"
value={formData.description}
onChange={handleChange}
/>处理多选框和单选按钮
对于checkbox或radio，需单独处理checked属性：
const [agreed, setAgreed] = useState(false);
<input
type="checkbox"
checked={agreed}
onChange={(e) => setAgreed(e.target.checked)}
/>使用表单库简化流程
复杂表单可借助库如Formik或React Hook Form。以下是React Hook Form的示例：
import { useForm } from 'react-hook-form';
function HookForm() {
const { register, handleSubmit, formState: { errors } } = useForm();
const onSubmit = (data) => console.log(data);
return (
<form onSubmit={handleSubmit(onSubmit)}>
<input {...register('username', { required: true })} />
{errors.username && <span>This field is required</span>}
<button type="submit">Submit</button>
</form>
);
}文件上传处理
通过<input type="file">捕获文件，使用FileReader或FormData处理上传：
const handleFileChange = (e) => {
const file = e.target.files[0];
console.log('Selected file:', file);
};
<input type="file" onChange={handleFileChange} />
