提交表單后如何洗掉輸入資料？
import React from 'react';
import { Form } from 'react-bootstrap';
const AddItem = () => {
const handleItemSubmit = (event) => {
event.preventDefault();
const carName = event.target.carName.value;
const companyName = event.target.companyName.value;
console.log(carName, companyName);
}
return (
<div className='w-50 mx-auto mt-5 py-5 d-block'>
<Form onSubmit={handleItemSubmit}>
<Form.Group className="mb-3" controlId="formBasicCarName">
<Form.Control name="carName" type="text" placeholder="Enter Car Model Name" />
</Form.Group>
<Form.Group className="mb-3" controlId="formBasicCompany">
<Form.Control name="companyName" type="text" placeholder="Enter Company Name" />
</Form.Group>
<button className='btn btn-primary' variant="primary" type="submit">
Submit
</button>
</Form>
</div>
);
};
export default AddItem;
在這里，我采用了兩個輸入并使用 OnSubmit 獲取資料。Ant 我可以輕松獲取資料。但我想在提交后使用名為“提交”的相同按鈕重置值。
uj5u.com熱心網友回復：
因此，為了洗掉重置表單，您應該使用受控表單。通過受控表單，我的意思是使用狀態來更改表單輸入。這是推薦的方式和最佳實踐。
因此，如果您必須重新撰寫代碼，它將看起來像這樣。
import React ,{useState} from 'react'; // import useState hook
import { Form } from 'react-bootstrap';
const AddItem = () => {
// Initialise Values with empty string or null;
const [inputeVal, setInputVal] = useState({
carName:"",
companyName:"",
});
const handleChange = (event)=>{
const {name, value} = event.target;
setInputVal({...inputVal, [name]:value}) // will set the values from input field to relevant state
}
const handleItemSubmit = () => {
// your handle submit logic goes here
// after submit you can reset the form by resetting the states
setInputVal({
carName:"",
companyName:"",
})
}
return (
<div className='w-50 mx-auto mt-5 py-5 d-block'>
<Form onSubmit={handleItemSubmit}>
<Form.Group className="mb-3" controlId="formBasicCarName">
<Form.Control onChange={handleChange} value={inputVal?.carName} name="carName" type="text" placeholder="Enter Car Model Name" />
</Form.Group>
<Form.Group className="mb-3" controlId="formBasicCompany">
<Form.Control onChange={handleChange} value={inputVal?.companyName} name="companyName" type="text" placeholder="Enter Company Name" />
</Form.Group>
<button className='btn btn-primary' variant="primary" type="submit">
Submit
</button>
</Form>
</div>
);
};
export default AddItem;
uj5u.com熱心網友回復：
像這樣重置表格：
const handleItemSubmit = (event) => {
event.preventDefault();
const carName = event.target.carName.value;
const companyName = event.target.companyName.value;
console.log(carName, companyName);
event.target.reset(); //add this line
}
uj5u.com熱心網友回復：
簡單的解決方法是像這樣重置表單。
const handleItemSubmit = (event) => {
event.preventDefault();
const carName = event.target.carName.value;
const companyName = event.target.companyName.value;
console.log(carName, companyName);
event.target.carName = "";
const inputField = document.getElementById("form");
inputField.reset();
};
并且不要忘記為您的表單提供 id
<Form onSubmit={handleItemSubmit} id="form">
但是，我強烈建議您查看上面關于 useState 的 callmeizaz 答案。那是處理表格的正確方法
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/472786.html
標籤：javascript 反应 形式 表格提交 重启