首页 > web前端 > js教程 > 正文

高级:在 React 中管理表单

WBOY
发布: 2024-07-17 10:20:01
转载
486人浏览过

高级:在 react 中管理表单

在 react 中管理表单可能会变得复杂,尤其是在处理多步骤表单、文件上传和复杂的验证逻辑等高级场景时。本指南深入介绍了受控和非受控组件、表单验证和管理复杂表单,帮助您在 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 元素访问表单数据。

使用 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 等第三方库可以简化表单验证并使其更易于维护。

以福米克和是的为例:

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;
登录后复制

在此示例中,表单状态是跨多个步骤进行管理的。下一步和`上一步

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

处理表单中的文件上传

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

示例:

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中文网其它相关文章!

最佳 Windows 性能的顶级免费优化软件
最佳 Windows 性能的顶级免费优化软件

每个人都需要一台速度更快、更稳定的 PC。随着时间的推移,垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是,许多工具可以让 Windows 保持平稳运行。

下载
相关标签:
来源:dev.to网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
开源免费商场系统广告
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号