从 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>  );}