简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
首页 > web前端 > js教程 > 正文

领导级别：在 React 中管理表单

WBOY
发布： 2024-07-18 21:00:53
原创
1036 人浏览过

Lead level: Managing Forms in React

作为首席开发人员，在 React 中管理表单不仅需要了解基础知识，还需要实现高级模式和最佳实践，以确保可扩展性、可维护性和性能。这个全面的指南涵盖了受控和非受控组件、表单验证和复杂表单管理技术，帮助您有效地领导您的团队。

受控组件

受控组件是 React 组件，其中表单数据由组件的状态处理。这种方法提供了对表单输入的完全控制，使表单行为可预测且更易于管理。

使用状态处理表单数据

要创建受控组件，请初始化表单数据的状态并根据用户输入更新状态。

示例：

import React, { useState } from 'react';

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

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

  const handleSubmit = (event) => {
    event.preventDefault();
    alert(`Name: ${formData.name}, Email: ${formData.email}`);
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Name:
        <input
          type="text"
          name="name"
          value={formData.name}
          onChange={handleChange}
        />
      </label>
      <br />
      <label>
        Email:
        <input
          type="email"
          name="email"
          value={formData.email}
          onChange={handleChange}
        />
      </label>
      <br />
      <button type="submit">Submit</button>
    </form>
  );
};

export default ControlledForm;
登录后复制

在此示例中，useState 管理表单数据，而每当用户在输入字段中键入内容时，handleChange 函数就会更新状态。

不受控制的组件

不受控制的组件依赖 DOM 来处理表单数据。 Refs 用于直接从 DOM 元素访问表单数据，这对于需要立即访问 DOM 的某些用例非常有用。

使用 Refs 访问表单数据

要创建不受控制的组件，请使用 useRef 挂钩为表单元素创建引用。

示例：

import React, { useRef } from 'react';

const UncontrolledForm = () => {
  const nameRef = useRef(null);
  const emailRef = useRef(null);

  const handleSubmit = (event) => {
    event.preventDefault();
    alert(`Name: ${nameRef.current.value}, Email: ${emailRef.current.value}`);
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Name:
        <input type="text" ref={nameRef} />
      </label>
      <br />
      <label>
        Email:
        <input type="email" ref={emailRef} />
      </label>
      <br />
      <button type="submit">Submit</button>
    </form>
  );
};

export default UncontrolledForm;
登录后复制

在此示例中，nameRef 和 emailRef 引用用于在提交表单时直接从 DOM 元素访问输入值。

表单验证

表单验证确保用户输入在提交之前满足所需的条件。正确的验证可以改善用户体验并防止处理错误的数据。

基本验证技术

基本验证涉及检查表单提交处理程序中的输入值并显示适当的错误消息。

示例：

import React, { useState } from 'react';

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

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

  const validate = () => {
    const newErrors = {};
    if (!formData.name) newErrors.name = 'Name is required';
    if (!formData.email) newErrors.email = 'Email is required';
    return newErrors;
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    const newErrors = validate();
    if (Object.keys(newErrors).length > 0) {
      setErrors(newErrors);
    } else {
      alert(`Name: ${formData.name}, Email: ${formData.email}`);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Name:
        <input
          type="text"
          name="name"
          value={formData.name}
          onChange={handleChange}
        />
        {errors.name && <span>{errors.name}</span>}
      </label>
      <br />
      <label>
        Email:
        <input
          type="email"
          name="email"
          value={formData.email}
          onChange={handleChange}
        />
        {errors.email && <span>{errors.email}</span>}
      </label>
      <br />
      <button type="submit">Submit</button>
    </form>
  );
};

export default BasicValidationForm;
登录后复制

在此示例中，验证函数检查名称和电子邮件字段是否为空并相应地设置错误消息。

用于表单验证的第三方库

使用 Formik 和 Yup 等第三方库可以简化表单验证并使其更易于维护。

Formik 和 Yup 的示例：

import React from 'react';
import { Formik, Field, Form, ErrorMessage } from 'formik';
import * as Yup from 'yup';

const SignupSchema = Yup.object().shape({
  name: Yup.string().required('Name is required'),
  email: Yup.string().email('Invalid email').required('Email is required'),
});

const FormikForm = () => (
  <div>
    <h1>Signup Form</h1>
    <Formik
      initialValues={{ name: '', email: '' }}
      validationSchema={SignupSchema}
      onSubmit={(values) => {
        alert(JSON.stringify(values, null, 2));
      }}
    >
      {() => (
        <Form>
          <label>
            Name:
            <Field name="name" />
            <ErrorMessage name="name" component="div" />
          </label>
          <br />
          <label>
            Email:
            <Field name="email" type="email" />
            <ErrorMessage name="email" component="div" />
          </label>
          <br />
          <button type="submit">Submit</button>
        </Form>
      )}
    </Formik>
  </div>
);

export default FormikForm;
登录后复制

在此示例中，Formik 和 Yup 处理表单状态和验证。 Formik 提供了一种灵活的方式来管理表单，而 Yup 则帮助定义验证模式。

复杂表单管理

管理多步骤表单

多步骤表单涉及跨多个步骤管理状态和导航，通常使表单填写过程更容易、更用户友好。

示例：

import React, { useState } from 'react';

const MultiStepForm = () => {
  const [step, setStep] = useState(1);
  const [formData, setFormData] = useState({
    name: '',
    email: '',
    address: '',
  });

  const nextStep = () => setStep(step + 1);
  const prevStep = () => setStep(step - 1);

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

  const handleSubmit = (e) => {
    e.preventDefault();
    alert(JSON.stringify(formData, null, 2));
  };

  switch (step) {
    case 1:
      return (
        <form>
          <h2>Step 1</h2>
          <label>
            Name:
            <input
              type="text"
              name="name"
              value={formData.name}
              onChange={handleChange}
            />
          </label>
          <button type="button" onClick={nextStep}>
            Next
          </button>
        </form>
      );
    case 2:
      return (
        <form>
          <h2>Step 2</h2>
          <label>
            Email:
            <input
              type="email"
              name="email"
              value={formData.email}
              onChange={handleChange}
            />
          </label>
          <button type="button" onClick={prevStep}>
            Back
          </button>
          <button type="button" onClick={nextStep}>
            Next
          </button>
        </form>
      );
    case 3:
      return (
        <form onSubmit={handleSubmit}>
          <h2>Step 3</h2>
          <label>
            Address:
            <input
              type="text"
              name="address"
              value={formData.address}
              onChange={handleChange}
            />
          </label>
          <button type="button" onClick={prevStep}>
            Back
          </button>
          <button type="submit">Submit</button>
        </form>
      );
    default:
      return null;
  }
};

export default MultiStepForm;
登录后复制

在此示例中，表单状态通过多个步骤进行管理。 `下一步

和 prevStep` 函数处理步骤之间的导航。

处理表单中的文件上传

处理文件上传涉及使用文件输入元素并在组件状态下管理上传的文件。

示例：

import React, { useState } from 'react';

const FileUploadForm = () => {
  const [file, setFile] = useState(null);

  const handleFileChange = (e) => {
    setFile(e.target.files[0]);
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    if (file) {
      alert(`File name: ${file.name}`);
    } else {
      alert('No file selected');
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Upload file:
        <input type="file" onChange={handleFileChange} />
      </label>
      <br />
      <button type="submit">Submit</button>
    </form>
  );
};

export default FileUploadForm;
登录后复制

在此示例中，handleFileChange 函数使用所选文件更新状态，handleSubmit 函数处理表单提交。

结论

在 React 中管理表单涉及理解和实现受控和非受控组件、执行表单验证以及处理复杂表单（例如多步表单和文件上传）。通过掌握这些概念，您可以在 React 应用程序中创建健壮、可维护且用户友好的表单。作为首席开发人员，您有效管理表单的能力将提高团队的生产力并有助于提高应用程序的整体质量，确保在整个开发过程中遵循最佳实践并保持高标准。

以上是领导级别：在 React 中管理表单的详细内容。更多信息请关注PHP中文网其他相关文章！

来源：dev.to
上一篇：了解端到端测试：综合指南 下一篇：我对后端的看法。
本站声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
作者最新文章
最新问题
function_exists()无法判定自定义函数 function test()    {        return true;    }    if (function_exists('TEST')) {        ech...
来自于 2024-04-29 11:01:01
0
2
1761
google 浏览器 手机版显示的怎么实现 老师您好，google 浏览器怎么变成手机版样式的？
来自于 2024-04-23 00:22:19
0
10
1901
子窗口操作父窗口，输出没反应 前两句可执行，最后一句没法应
来自于 2024-04-19 15:37:47
0
1
1623
父窗口没有输出 document.onclick = function(){ window.opener.document.write('我是子窗口的输出');                  ...
来自于 2024-04-18 23:52:34
0
1
1528
关于CSS思维导图的课件在哪？ 课件
来自于 2024-04-16 10:10:18
0
0
1567
相关专题
更多>
热门推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网：公益在线PHP培训，帮助PHP学习者快速成长！