在 React.js 中构建表单：初学者指南-js教程-PHP中文网

在 React.js 中构建表单：初学者指南

WBOY

发布： 2024-08-18 07:00:45

原创

280 人浏览过

Building Forms in React.js : A beginners guide

表单是 Web 应用程序不可或缺的一部分，支持用户交互和数据收集。在 React.js 中，构建表单涉及使用状态管理和组件驱动架构来确保效率和可维护性。本指南将涵盖在 React.js 中构建表单的最佳实践，使您的应用程序健壮且用户友好。

1.使用受控组件

受控组件是 React 中处理表单输入的首选方式。它们将表单数据保留在组件状态中，从而更易于管理和验证。

将所有表单输入值存储在一个状态中。创建一个对象并将所有输入与其状态中的属性进行映射，示例如下

import React, { useState } from 'react';

const MyForm = () => {


  const [formData, setFormData] = useState({ name: '', email: '' });

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

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

return (
  <form onSubmit={handleSubmit}>
    <input type="text" name="name" value={formData.name}     onChange={handleChange} />
    <input type="email" name="email" value={formData.email}     onChange={handleChange} />
    <button type="submit">Submit</button>
</form>
)}
export default MyForm

登录后复制

2.错误处理

错误处理和验证是表单的重要组成部分。您必须验证并检查用户输入的每个值是否有错误，并处理所有情况，例如：

获取 null/未定义
获取空值
无效数据类型等

必须实现客户端验证以增强用户体验并减少服务器负载，最终提高性能。利用 Yup 等库或自定义验证逻辑来确保数据完整性。

让我们看看如何实现自定义验证逻辑

const validate = (formData) => {
  const errors = {};
  if (!formData.name) errors.name = 'Name is required';
  if (!formData.email) errors.email = 'Email is required';
  return errors;
};
const MyForm = () => {
  const [formData, setFormData] = useState({ name: '', email: '' });
  const [errors, setErrors] = useState({});
  const handleSubmit = (e) => {
    e.preventDefault();
    const validationErrors = validate(formData);
    if (Object.keys(validationErrors).length === 0) {
    console.log(formData);
    } else {
    setErrors(validationErrors);
  }
};
return (
  <form onSubmit={handleSubmit}>
    <input type="text" name="name" value={formData.name} onChange={handleChange} />
    {errors.name && <span>{errors.name}</span>}
    <input type="email" name="email" value={formData.email} onChange={handleChange} />
    {errors.email && <span>{errors.email}</span>}
    <button type="submit">Submit</button>
</form>
);
};

登录后复制

为了工作方便，必须使用Yup包来顺利验证表单数据。它是一个非常流行的包，与 React-Hook-Form 或 Formik 等表单库一起使用。
是的文档：https://www.npmjs.com/package/yup

3.利用第三方库

Formik 和 React Hook Form 等库简化了表单管理，提供了开箱即用的强大功能，使开发人员可以轻松地以更具可扩展性和灵活的方式构建和验证表单

使用福米克：

文档：- https://formik.org/docs/overview

import React from 'react';
import ReactDOM from 'react-dom';
import { Formik, Field, Form } from 'formik';


const BasicForm = () => (
   <div> 
    <h1>Sign Up</h1>
    <Formik
      initialValues={{
      firstName: '',
      lastName: '',
      email: '',
    }}


  onSubmit={async (values) => {
    await new Promise((r) => setTimeout(r, 500));
    alert(JSON.stringify(values, null, 2));
  }}
>
  <Form>
    <label htmlFor="firstName">First Name</label>
    <Field id="firstName" name="firstName" placeholder="Jane" />


    <label htmlFor="lastName">Last Name</label>
    <Field id="lastName" name="lastName" placeholder="Doe" />


    <label htmlFor="email">Email</label>
    <Field
    id="email"
    name="email"
    placeholder="jane@acme.com"
    type="email"
  />
   <button type="submit">Submit</button>
  </Form>
 </Formik>
</div>
);


ReactDOM.render(<BasicForm />, document.getElementById('root'));

登录后复制

点击查看现场 Formik 演示