管理表单是开发 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 (
);
};
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 (
);
};
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 (
);
};
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));
}}
>
{({ errors, touched }) => (
<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 = () => {
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 (
step 1
);
case 2:
return (
step 2
);
case 3:
return (
step 3
);
default:
return null;
}
};
export default multistepform;
在此示例中，表单状态是跨多个步骤进行管理的。 nextstep 和 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 (
);
};
export default FileUploadForm;
在此示例中，handlefilechange 函数用所选文件更新状态，handlesubmit 函数处理表单提交。
结论
在 react 中管理表单涉及了解受控和非受控组件、实现表单验证以及处理复杂表单。通过掌握这些概念，您可以在 react 应用程序中创建健壮且用户友好的表单。作为一名初级开发人员，在这些领域打下坚实的基础将为您作为 react 开发人员继续学习和成长奠定成功的基础。
本站部分资源来源于网络，仅限用于学习和研究目的，请勿用于其他用途。
如有侵权请发送邮件至1943759704@qq.com删除
码农资源网 » 初级水平：在 React 中管理表单
