初级水平：在 React 中管理表单

php中文网 2024-10-15 11:14:24

管理表单是开发 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 (

); }; export default controlledform;

在此示例中，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 (

); }; export default uncontrolledform;

在此示例中，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 (

); }; 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 (

); case 2: return ( ); case 3: return ( ); 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 (

); }; export default FileUploadForm;

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