在 React 中提交表单时如何获取要显示的名称和 uuid

Posted 2023-02-23

【中文标题】在 React 中提交表单时如何获取要显示的名称和 uuid

【英文标题】：How do I get the name and uuid to display when the form is submitted in React

【发布时间】：2022-01-15 08:58:56

【问题描述】：

我正在尝试创建一个 Web 应用程序，该应用程序将具有一个用于收集名称的输入字段、一个用于提交的按钮以及一个用于显示结果消息的区域。我正在使用带有引导程序样式的表单，当在表单中使用“onSubmit”时，它什么也没做，但是如果我将表单更改为“onClick”，它会显示一个名称：UUID，这正是我的输出想。 React On Submit picture React On Click picture 有人可以帮我理解为什么会发生这种情况以及如何解决吗？ 如何获取表单提交时显示的名称和 uuid？ 请参阅下面的代码和屏幕截图：

...
import React,  useState  from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import  v4 as uuidv4  from 'uuid';
import "./form.css";

function Form() 
    const [name, setName] = useState("");
    const [uuid, setUuid] = useState("");
  
    const handleSubmit = (e) => 
      // Preventing the default behavior of the form submit
      e.preventDefault();
  
      // Getting the value and name of the input which triggered the change
      const  target  = e;
      const inputType = target.name;
      const inputValue = target.value;
  
      // use input to save
        if (inputType === "name") 
            setName(inputValue);
            setUuid(uuidv4());
            
            e.preventDefault();
    ;

    return (
        <div className="container">
        <form onSubmit=handleSubmit>
            <div className="row instructions text-left">
            <div className=" col-sm-2 d-flex justify-content-between"></div>
            <div className=" col-sm-10 d-flex justify-content-between">
                <label>Please enter your name below:</label>
            </div>
            </div>
            <div className="row">
            <div className="col-sm-2 label-font">
                <label className="label-font name" value="name">
                Name:
                </label>
            </div>
            <div className="col-sm-5">
                <div className="row">
                <input
                    name="name"
                    type="name"
                    className="form-control"
                    placeholder="Type your name here (with no spaces)"
                ></input>
                </div>
                <div className="row">
                <button
                    type="submit"
                    className="btn-success btn-lg"
                >
                    Submit
                </button>
                </div>
            </div>
            </div>
        </form>
        <div className="row">
            <div className=" col-sm-2 label-font">
                <label className="label-font">
                Result:
                </label>
            </div>
            <div className=" col-sm-10 result-output">
                <label className="result-output">
                name: uuid
                </label>
            </div>
            </div>
        </div>
    );
    


  export default Form;
...

【问题讨论】：

您的活动是针对整个表单的，而不是针对输入字段的。尝试放一个console.log或者调试e.target

【参考方案1】：

您的事件是针对整个表单的，而不是针对输入字段的。

这是对您的代码进行最少更改的方式：

const handleSubmit = (e) => 
      // Preventing the default behavior of the form submit
      e.preventDefault();
  
      // Getting the value and name of the input which triggered the change
      const inputValue = e.target.name.value;
  
      // use input to save
      setName(inputValue);
      setUuid(uuidv4());
    ;

工作场所的链接：https://codesandbox.io/s/sleepy-austin-4w9iv?file=/src/App.js