在React上创建多个输入

Question

主组件

数据记录表组件

useInput组件

表组件输出的代码(我不能添加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