react如何提交表单

使用受控组件提交表单

在React中，受控组件是处理表单输入的标准方式。通过将表单元素的值与React组件的state绑定，可以轻松地管理和提交表单数据。

创建表单state：

const [formData, setFormData] = useState({
  username: '',
  password: ''
});

处理输入变化：

const handleChange = (e) => {
  setFormData({
    ...formData,
    [e.target.name]: e.target.value
  });
};

处理表单提交：

const handleSubmit = (e) => {
  e.preventDefault();
  console.log(formData);
  // 这里可以添加API调用等提交逻辑
};

表单结构：

<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>

使用非受控组件提交表单

对于简单表单，可以使用非受控组件方式，通过ref直接访问DOM元素的值。

创建ref：

const usernameRef = useRef();
const passwordRef = useRef();

处理表单提交：

const handleSubmit = (e) => {
  e.preventDefault();
  console.log({
    username: usernameRef.current.value,
    password: passwordRef.current.value
  });
};

表单结构：

<form onSubmit={handleSubmit}>
  <input type="text" ref={usernameRef} />
  <input type="password" ref={passwordRef} />
  <button type="submit">Submit</button>
</form>

使用Formik库处理复杂表单

对于复杂表单场景，Formik提供了更强大的解决方案。

安装Formik：

npm install formik

基本使用：

import { Formik, Form, Field, ErrorMessage } from 'formik';

<Formik
  initialValues={{ username: '', password: '' }}
  onSubmit={(values) => {
    console.log(values);
  }}
>
  <Form>
    <Field name="username" type="text" />
    <ErrorMessage name="username" component="div" />
    <Field name="password" type="password" />
    <ErrorMessage name="password" component="div" />
    <button type="submit">Submit</button>
  </Form>
</Formik>

使用React Hook Form处理高性能表单

React Hook Form是另一个流行的表单库，注重性能优化。

安装React Hook Form：

npm install react-hook-form

基本使用：

import { useForm } from 'react-hook-form';

const { register, handleSubmit } = useForm();

const onSubmit = data => console.log(data);

<form onSubmit={handleSubmit(onSubmit)}>
  <input {...register("username")} />
  <input {...register("password")} type="password" />
  <button type="submit">Submit</button>
</form>

表单验证处理

为表单添加验证逻辑，确保数据有效性。

受控组件验证示例：

const [errors, setErrors] = useState({});

const validate = () => {
  const newErrors = {};
  if (!formData.username) newErrors.username = 'Username is required';
  if (!formData.password) newErrors.password = 'Password is required';
  setErrors(newErrors);
  return Object.keys(newErrors).length === 0;
};

const handleSubmit = (e) => {
  e.preventDefault();
  if (validate()) {
    console.log(formData);
  }
};

React Hook Form验证示例：

const { register, handleSubmit, formState: { errors } } = useForm();

<form onSubmit={handleSubmit(onSubmit)}>
  <input {...register("username", { required: true })} />
  {errors.username && <span>This field is required</span>}
  <input {...register("password", { required: true })} type="password" />
  {errors.password && <span>This field is required</span>}
  <button type="submit">Submit</button>
</form>