xxxxxxxxxx
//with the useref hook you can do it easily
const form = useRef(null);
const handlesubmit = () => {
form.current.reset(); //this will reset all the inputs in the form
}
<form ref={form} onSubmit={handlesubmit}></form>
xxxxxxxxxx
// uncontrolled
handleSubmit = (event) => {
e.preventDefault();
e.target.reset();
}
// controlled
handleSubmit = (event) => {
event.preventDefault();
console.log(this.state);
this.setState({
name: '',
email: '',
password: '',
});
event.target.reset();
};
xxxxxxxxxx
// Uncontrolled form reset
handleSubmit = (event) => {
event.preventDefault();
event.target.reset();
};
<form onSubmit={this.handleSubmit}>
</form>
//...........................................................
// Controlled form reset
state = {
name: '',
password: '',
email: '',
};
handleSubmit = (event) => {
event.preventDefault();
this.setState({name: '',email: '',password: ''});
event.target.reset();
};
handleChange = (event) => {
this.setState({[event.target.name]: event.target.value,});
};
<form onSubmit={this.handleSubmit}>
</form>
xxxxxxxxxx
<Form>
<Input placeholder="Input"/>
// ...
// Set type="reset"
<Button type="reset">Submit</Button>
</Form>