React提交表单时如何获取显示的name和uuid

Question

我正在尝试创建一个 Web 应用程序，它将有一个用于收集名称的输入字段、一个用于提交的按钮和一个用于显示结果消息的区域。我正在使用样式为 bootstrap 的表单，当在表单中使用“onSubmit”时，它什么也没做，但是如果我将表单更改为“onClick”，它会显示 Name: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;
...

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

Alink到工作场地：https://codesandbox.io/s/sleepy-austin-4w9iv?file=/src/App.js

React提交表单时如何获取显示的name和uuid

How do I get the name and uuid to display when the form is submitted in React

components

onsubmit

reactjs

react-hooks