reactjs - React-Multiple 输入

Question

家庭组件

数据表单组件

使用输入组件

代码的表格组件 输出（我不能添加 3. 行）

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

Answer 1

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: "", data2: "", 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