从 ui 中获取多个值

Question

我计划构建一个用户界面，其中只有几个字段，如文本框、日期等。我需要允许用户根据需要多次向所有这些字段添加值。例如：用户填写了所有数据并提交了数据，数据应该被临时存储，并且所有字段都应该在用户界面上被清除，因此用户可以使用新值再次填充数据。完成所有这些操作后，用户将点击“提交”，将所有收集到的数据作为一次 api 调用的一部分发送到后端。你们能帮我知道如何实现这个吗？

Answer 1

以下是有关如何执行此操作的示例：

import React, { useState } from "react";

import "./style.css";

export default function App() {

  const [name, setName] = useState("");

  const [number, setNumber] = useState("");

  const [serverData, setServerData] = useState([]);

  const handleSubmit = event => {

    event.preventDefault();

    setServerData(serverData.concat({ name: name, number: number }));

    setName("");

    setNumber("");

    console.log(serverData);

  };

  const sendToServer = () => {

    console.log("server ko post request with following data...");

    console.log(serverData);

    setName("");

    setNumber("");

  };

  return (

    <div>

      <form onSubmit={handleSubmit}>

        <input value={name} onChange={e => setName(e.target.value)} />

        <input value={number} onChange={e => setNumber(e.target.value)} />

        <button>add data</button>

      </form>

      <button onClick={sendToServer}>Submit to server</button>

    </div>

  );

}