问题描述
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