在 React/Next Js 中检查表单输入值的更好方法答案

【问题标题】：Better way to check input values of a form in React/Next Js在 React/Next Js 中检查表单输入值的更好方法
【发布时间】：2021-04-06 14:56:27
【问题描述】：

我为我的 Web 应用程序编写了一个简单的表单。我计划编写一个功能来检查以确保所有字段都是非空且有效的，如果不是，则将错误消息显示为组件。这是骨架：

import { useState } from 'react';
import emailjs from "emailjs-com";
import apiKeys from "../public/credentials/apikeys";
import ContactStyles from "../public/styles/ContactStyles";

function ContactForm() {

    const [fieldDict, setFieldDict] = useState(
        {
            name: "",
            email: "",
            subject: "",
            message: ""
        });

    function sendEmail(e) {
        e.preventDefault();
        // TODO: Show success or error message
        var blankField = false;
        if (fieldDict.name.length === 0) {
            console.log("No name"); // To be implemented here and on subsequent lines
            blankField = true;
        }
        if (fieldDict.email.length === 0) {
            console.log("No email");
            blankField = true;
        }
        if (fieldDict.subject.length === 0) {
            console.log("No subject");
            blankField = true;
        }
        if (fieldDict.message.length === 0) {
            console.log("No message");
            blankField = true;
        }

        if (blankField) { return }

        emailjs.sendForm(apiKeys.serviceID, apiKeys.templateID, e.target, apiKeys.userID)
        .then((result) => {
            console.log(result, fieldDict);
        }, (error) => {
            console.log(error, fieldDict);
        });
        e.target.reset();
    }

    return (
        <div className="contact-section">
            <div className="contact-container">
                <h5 className="form-header">Send me an email!</h5>
            <form className="contact-form" onSubmit={sendEmail}>
                <div className="form-group">
                    <label className="label">Name</label>
                    <input className="input" type="text" name="name" autoComplete="off"
                    onInput={e => {
                        setFieldDict(prevFieldDict => ({...prevFieldDict, name: e.target.value}));
                    }}/>
                </div>
                <div className="form-group">
                    <label className="label">Email</label>
                    <input className="input" type="email" name="email" autoComplete="off"
                    onInput={e => {
                        setFieldDict(prevFieldDict => ({...prevFieldDict, email: e.target.value}));
                    }}/>
                </div>
                <div className="form-group">
                    <label className="label">Subject</label>
                    <input className="input" type="subject" name="subject" autoComplete="off"
                    onInput={e => {
//? Viability of this method?
                        setFieldDict(prevFieldDict => ({...prevFieldDict, subject: e.target.value}));
                    }}/>
                </div>
                <div className="form-group">
                    <label className="label">Message</label>
                    <textarea className="input textarea" name="message" rows="6"
                    onInput={e => {
                        setFieldDict(prevFieldDict => ({...prevFieldDict, message: e.target.value}));
                    }}/>
                </div>
                <div className="submit">
                    <button type="submit" value="Send">Submit</button>
                </div>
            </form>
            </div>
            <style jsx global>{ContactStyles}</style>
        </div>
    );
}


export default ContactForm;

每次击键时，相应的键（姓名、电子邮件、主题、消息）都会更新。

问题

有没有更好的方法来做到这一点？一种更有效的方法似乎是仅在使用点击提交时更新 fieldDict 字典，但根据 react 渲染组件的方式，这真的很重要吗？

注意：代码原样工作得很好，我只是问是否有更好的方法来做到这一点？如果你想更好地看到这个，请将onInput{...}的内容更改为e => console.log(e.target.value)。

非常感谢任何见解！

【问题讨论】：

标签： reactjs next.js

【解决方案1】：

您可以遍历您的 dict 并过滤所有可伪造的名称。



function sendEmail(e) {
  e.preventDefault();

  const blankFields = Object.keys(fieldDict).filter(fieldName => !fieldDict[fieldName])
  blankFields.forEach(fieldName => console.log(`no ${fieldName}`);


  if (blankFields.length) { return }

  emailjs.sendForm(apiKeys.serviceID, apiKeys.templateID, e.target, apiKeys.userID)
      .then((result) => {
        console.log(result, fieldDict);
      }, (error) => {
        console.log(error, fieldDict);
      });
  e.target.reset();
}

【讨论】：