React-Multiple 输入

如何解决React-Multiple 输入

Home Component

Data-Form Component

useInput Component

Table Component Output of Code (I can't add 3. row)

我想获得输入并将其作为表格数据放在表格中。但是我只能添加一个三重数据我不能添加第二行。第二个问题是我想在提交表单时重置输入框我该怎么做。第三个问题是我如何在开始时制作空表（我无法描述空对象）。我不需要将它保存在 Json 或任何数据库中，我只是想在打开网站时添加。我的意思是这将是临时数据。 谢谢你的帮助:)

解决方法

var inputData = []  //Global

const DataFormComponent = () => {
  const [formData,setFormData] = useState({data1: "",data2: "",data3:""})
  const handleSubmit = (event) => {
         event.preventDefault();
         setFormData({...formData,data1,data2,data3})  //spread operator and also duplicate properties in object gets assigned the new value         
         inputData.push(formData);
         console.log(inputData);
         setFormData({data1: "",data3: ""}
  }

  return(
     <form onSubmit = {handleSubmit}>
        <input name = "data1" type = "txt"/>
        <input name = "data2" type = "txt"/>
        <input name = "data3" type = "txt"/>
        <button type = "submit">SUBMIT FORM</button>
      </form>
    )
  }

export default DataFormComponent