xxxxxxxxxx
const App = () => {
const [message, setMessage] = useState('');
return (
<div>
<input
type="text"
value={message}
onChange={(event) => {
setMessage(event.target.value);
}}/>
<button
onClick={() => {
alert('check')
// clear input value
setMessage('');
}}>
Clear field
</button>
</div>
);
};
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
cancelCourse = () => {
document.getElementById("create-course-form").reset();
}
render() {
return (
<form id="create-course-form">
<input />
<input />
<input />
</form>
);
}
xxxxxxxxxx
<!-- you just need a button type of reset -->
<form>
<div>
<label for="name">Name</label>
<input type="text" id="name" placeholder="name" />
</div>
<div>
<label for="password">Password</label>
<input type="password" id="password" placeholder="password" />
</div>
<button type="reset">Reset</button>
<button>Submit</button>
</form>