当前位置：首页 > 文章列表 > 文章 > 前端 > 在 Reactjs 中构建表单：初学者指南

在 Reactjs 中构建表单：初学者指南

来源：dev.to 2024-08-18 23:36:54 0浏览收藏

怎么入门文章编程？需要学习哪些知识点？这是新手们刚接触编程时常见的问题；下面golang学习网就来给大家整理分享一些知识点，希望能够给初学者一些帮助。本篇文章就来介绍《在 Reactjs 中构建表单：初学者指南》，涉及到，有需要的可以收藏一下

表单是 web 应用程序不可或缺的一部分，支持用户交互和数据收集。在 react.js 中，构建表单涉及使用状态管理和组件驱动架构来确保效率和可维护性。本指南将涵盖在 react.js 中构建表单的最佳实践，使您的应用程序健壮且用户友好。

1.使用受控组件

受控组件是 react 中处理表单输入的首选方式。它们将表单数据保留在组件状态中，从而更易于管理和验证。

将所有表单输入值存储在一个状态中。创建一个对象并将所有输入与其状态中的属性映射，示例如下

import react, { usestate } from 'react';

const myform = () => {


  const [formdata, setformdata] = usestate({ name: '', email: '' });

  const handlechange = (e) => {
    const { name, value } = e.target;
    setformdata({ ...formdata, [name]: value });
  };

  const handlesubmit = (e) => {
    e.preventdefault();
    console.log(formdata);
  };

return (
  <form onsubmit={handlesubmit}>
    &lt;input type=&quot;text&quot; name=&quot;name&quot; value={formdata.name}     onchange={handlechange} /&gt;
    &lt;input type=&quot;email&quot; name=&quot;email&quot; value={formdata.email}     onchange={handlechange} /&gt;
    <button type="submit">submit</button>
</form>
)}
export default myform

2.错误处理

错误处理和验证是表单的重要组成部分。您必须验证并检查用户输入的每个值是否有错误，并处理所有情况，例如：

获取空/未定义
获取空值
无效数据类型等

必须实现客户端验证以增强用户体验并减少服务器负载，最终提高性能。利用 yup 等库或自定义验证逻辑来确保数据完整性。

让我们看看，如何实现自定义验证逻辑

const validate = (formdata) => {
  const errors = {};
  if (!formdata.name) errors.name = 'name is required';
  if (!formdata.email) errors.email = 'email is required';
  return errors;
};
const myform = () => {
  const [formdata, setformdata] = usestate({ name: '', email: '' });
  const [errors, seterrors] = usestate({});
  const handlesubmit = (e) => {
    e.preventdefault();
    const validationerrors = validate(formdata);
    if (object.keys(validationerrors).length === 0) {
    console.log(formdata);
    } else {
    seterrors(validationerrors);
  }
};
return (
  <form onsubmit={handlesubmit}>
    &lt;input type=&quot;text&quot; name=&quot;name&quot; value={formdata.name} onchange={handlechange} /&gt;
    {errors.name && <span>{errors.name}</span>}
    &lt;input type=&quot;email&quot; name=&quot;email&quot; value={formdata.email} onchange={handlechange} /&gt;
    {errors.email && <span>{errors.email}</span>}
    <button type="submit">submit</button>
</form>
);
};

为了工作方便，必须使用yup包来顺利验证表单数据。它是一个非常流行的包，与 react-hook-form 或 formik 等表单库一起使用。
是的文档：https://www.npmjs.com/package/yup

3.利用第三方库

formik 和 react hook form 等库简化了表单管理，提供了开箱即用的强大功能，并使开发人员可以轻松地以更具可扩展性和灵活的方式构建和验证表单

使用福米克：

文档 :- https://formik.org/docs/overview

import React from 'react';
import ReactDOM from 'react-dom';
import { Formik, Field, Form } from 'formik';


const BasicForm = () => (
   <div> 
    <h1>Sign Up</h1>
    <Formik
      initialValues={{
      firstName: '',
      lastName: '',
      email: '',
    }}


  onSubmit={async (values) => {
    await new Promise((r) => setTimeout(r, 500));
    alert(JSON.stringify(values, null, 2));
  }}
>
  <Form>
    <label htmlFor="firstName">First Name</label>
    <Field id="firstName" name="firstName" placeholder="Jane" />


    <label htmlFor="lastName">Last Name</label>
    <Field id="lastName" name="lastName" placeholder="Doe" />


    <label htmlFor="email">Email</label>
    <Field
    id="email"
    name="email"
    placeholder="jane@acme.com"
    type="email"
  />
   <button type="submit">Submit</button>
  </Form>
 </Formik>
</div>
);


ReactDOM.render(<BasicForm />, document.getElementById('root'));

点击查看现场formik demo