中级：在 React 中管理表单

百变鹏仔 2个月前 (10-14) #JavaScript

文章标签表单

表单对于在 web 应用程序中收集用户输入至关重要。在 react 中管理表单可能会变得复杂，尤其是在处理验证、多步骤流程和文件上传时。本指南深入探讨了管理表单的状态、使用引用、实现验证和处理复杂表单。

受控组件

受控组件是由组件状态处理表单数据的组件。这种方法确保 react 完全控制表单输入，从而实现可预测和可管理的表单行为。

使用状态处理表单数据

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

示例：

import react, { usestate } from 'react';const controlledform = () =&gt; {  const [formdata, setformdata] = usestate({    name: '',    email: ''  });  const handlechange = (event) =&gt; {    const { name, value } = event.target;    setformdata((prevdata) =&gt; ({      ...prevdata,      [name]: value    }));  };  const handlesubmit = (event) =&gt; {    event.preventdefault();    alert(`name: ${formdata.name}, email: ${formdata.email}`);  };  return (

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

不受控制的组件

不受控制的组件依赖 dom 来处理表单数据。您可以使用 refs 直接从 dom 元素访问表单数据。

使用 refs 访问表单数据

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

示例：

import react, { useref } from 'react';const uncontrolledform = () =&gt; {  const nameref = useref(null);  const emailref = useref(null);  const handlesubmit = (event) =&gt; {    event.preventdefault();    alert(`name: ${nameref.current.value}, email: ${emailref.current.value}`);  };  return (

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

表单验证

表单验证对于确保用户输入在提交之前满足所需标准至关重要。

基本验证技术

您可以通过检查表单提交处理程序中的输入值来添加基本验证。

示例：

import react, { usestate } from 'react';const basicvalidationform = () =&gt; {  const [formdata, setformdata] = usestate({    name: '',    email: ''  });  const [errors, seterrors] = usestate({});  const handlechange = (event) =&gt; {    const { name, value } = event.target;    setformdata((prevdata) =&gt; ({      ...prevdata,      [name]: value    }));  };  const validate = () =&gt; {    const newerrors = {};    if (!formdata.name) newerrors.name = 'name is required';    if (!formdata.email) newerrors.email = 'email is required';    return newerrors;  };  const handlesubmit = (event) =&gt; {    event.preventdefault();    const newerrors = validate();    if (object.keys(newerrors).length &gt; 0) {      seterrors(newerrors);    } else {      alert(`name: ${formdata.name}, email: ${formdata.email}`);    }  };  return (

name: {errors.name && {errors.name}}
email: {errors.email && {errors.email}}
submit );};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 = () =&gt; (  <div>    <h1>signup form</h1>    <formik initialvalues="{{" name: email: validationschema="{signupschema}" onsubmit="{(values)"> {        alert(json.stringify(values, null, 2));      }}    &gt;      {({ errors, touched }) =&gt; (        <form>          <label>            name:            <field name="name"></field><errormessage name="name" component="div"></errormessage></label>          <br><label>            email:            <field name="email" type="email"></field><errormessage name="email" component="div"></errormessage></label>          <br><button type="submit">submit</button>        </form>      )}    </formik></div>);export default formikform;

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

复杂表单管理

管理多步骤表单

管理多步骤表单涉及处理表单状态和步骤之间的导航。

示例：

import react, { usestate } from 'react';const multistepform = () =&gt; {  const [step, setstep] = usestate(1);  const [formdata, setformdata] = usestate({    name: '',    email: '',    address: '',  });  const nextstep = () =&gt; setstep(step + 1);  const prevstep = () =&gt; setstep(step - 1);  const handlechange = (e) =&gt; {    const { name, value } = e.target;    setformdata((prevdata) =&gt; ({      ...prevdata,      [name]: value    }));  };  const handlesubmit = (e) =&gt; {    e.preventdefault();    alert(json.stringify(formdata, null, 2));  };  switch (step) {    case 1:      return (

step 1

step 2

email: back next ); case 3: return (

step 3

address: back submit ); default: return null; }};export default multistepform;

在此示例中，表单状态是跨多个步骤进行管理的。 nextstep 和 prevstep 函数处理步骤之间的导航。

处理表单中的文件上传

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

示例

import React, { useState } from 'react';const FileUploadForm = () =&gt; {  const [file, setFile] = useState(null);  const handleFileChange = (e) =&gt; {    setFile(e.target.files[0]);  };  const handleSubmit = (e) =&gt; {    e.preventDefault();    if (file) {      alert(`File name: ${file.name}`);    } else {      alert('No file selected');    }  };  return (

Upload file:
Submit );};export default FileUploadForm;

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

结论

在 react 中管理表单涉及了解受控和非受控组件、实现表单验证以及处理复杂表单。通过掌握这些概念，您可以在 react 应用程序中创建健壮且用户友好的表单。作为一名中级开发人员，在这些领域打下坚实的基础将增强您开发更复杂、更可靠的表单的能力，使您成为 react 生态系统中更有效、更高效的开发人员。

文章推荐