如何从下面的代码中删除 React 中提交后的表单值?
How to Remove the form value After Submit in React from below code?
提交表单后如何删除输入数据?
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 I 可以轻松获取数据。但是我想在使用名为“提交”的相同按钮提交后重置该值。
因此,为了删除重置表单,您应该使用受控表单。
通过受控表单,我的意思是使用状态来更改表单输入。这是推荐的方法和最佳实践。
所以如果你必须 re-write 你的代码,它看起来像这样。
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;
简单的解决方法是像这样重置表单。
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 回答。那是处理表单的正确方法
像这样重置表格:
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
}
提交表单后如何删除输入数据?
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 I 可以轻松获取数据。但是我想在使用名为“提交”的相同按钮提交后重置该值。
因此,为了删除重置表单,您应该使用受控表单。 通过受控表单,我的意思是使用状态来更改表单输入。这是推荐的方法和最佳实践。
所以如果你必须 re-write 你的代码,它看起来像这样。
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;
简单的解决方法是像这样重置表单。
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 回答。那是处理表单的正确方法
像这样重置表格:
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
}