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
//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
cancelCourse = () => {
document.getElementById("create-course-form").reset();
}
render() {
return (
<form id="create-course-form">
<input />
<input />
<input />
</form>
);
}
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
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
data: ''
}
this.updateState = this.updateState.bind(this);
this.clearData = this.clearData.bind(this);
};
updateState(e) {
this.setState({data: e.target.value});
}
clearData() {
this.setState({data: ''});
ReactDOM.findDOMNode(this.refs.myInput).focus();
}
render() {
return (
<>
<input type="text" value = {this.state.data} onChange = {this.updateState} ref = "myInput"/>
<button onClick={this.clearData}>CLEAR</button>
<h4>{this.state.data}</h4>
</>
);
}
}
ReactDOM.render(
<App />, document.getElementById('mountNode') );
xxxxxxxxxx
<Form>
<Input placeholder="Input"/>
// ...
// Set type="reset"
<Button type="reset">Submit</Button>
</Form>