react如何设计表单
React 表单设计方法
受控组件表单
使用 React 的 state 管理表单数据，通过 onChange 事件同步输入值与状态。适用于需要实时验证或复杂交互的场景。
function ControlledForm() {
const [formData, setFormData] = useState({ username: '', password: '' });
const handleChange = (e) => {
setFormData({ ...formData, [e.target.name]: e.target.value });
};
return (
<form>
<input
name="username"
value={formData.username}
onChange={handleChange}
/>
<input
name="password"
type="password"
value={formData.password}
onChange={handleChange}
/>
</form>
);
}非受控组件表单
通过 useRef 直接访问 DOM 元素获取表单值。适用于简单表单或需要集成第三方库的情况。
function UncontrolledForm() {
const usernameRef = useRef(null);
const passwordRef = useRef(null);
const handleSubmit = (e) => {
e.preventDefault();
console.log(usernameRef.current.value, passwordRef.current.value);
};
return (
<form onSubmit={handleSubmit}>
<input ref={usernameRef} name="username" />
<input ref={passwordRef} name="password" type="password" />
<button type="submit">Submit</button>
</form>
);
}表单验证方案
结合状态管理实现基础验证，或使用库如 Formik + Yup 处理复杂规则。
// 基础验证示例
const [errors, setErrors] = useState({});
const validate = () => {
const newErrors = {};
if (!formData.username) newErrors.username = 'Required';
if (formData.password.length < 6) newErrors.password = 'Too short';
setErrors(newErrors);
return Object.keys(newErrors).length === 0;
};第三方库推荐
- Formik: 提供表单状态管理、提交处理和验证集成。
- React Hook Form: 高性能、非受控为主的轻量级方案。
- Yup: 与 Formik 搭配使用的 schema 验证库。
// Formik + Yup 示例
import { useFormik } from 'formik';
import * as Yup from 'yup';
const validationSchema = Yup.object({
username: Yup.string().required('Required'),
password: Yup.string().min(6, 'Too short').required('Required'),
});
const FormikForm = () => {
const formik = useFormik({
initialValues: { username: '', password: '' },
validationSchema,
onSubmit: values => console.log(values),
});
return (
<form onSubmit={formik.handleSubmit}>
<input
name="username"
onChange={formik.handleChange}
value={formik.values.username}
/>
{formik.errors.username && <div>{formik.errors.username}</div>}
<button type="submit">Submit</button>
</form>
);
};动态表单字段
通过状态数组管理动态增减的字段，适用于需要用户添加多个输入项的场景。
const DynamicForm = () => {
const [fields, setFields] = useState([{ value: '' }]);
const addField = () => setFields([...fields, { value: '' }]);
const removeField = (index) => {
const newFields = [...fields];
newFields.splice(index, 1);
setFields(newFields);
};
return (
<form>
{fields.map((field, i) => (
<div key={i}>
<input
value={field.value}
onChange={(e) => {
const newFields = [...fields];
newFields[i].value = e.target.value;
setFields(newFields);
}}
/>
<button type="button" onClick={() => removeField(i)}>Remove</button>
</div>
))}
<button type="button" onClick={addField}>Add Field</button>
</form>
);
};
