how to clear data in textbox in reactjs? After submit of the form I want to clear all the data as well as on click of cancel button. Can anyone help please ?
//Create Form
onSubmit(e){
e.preventDefault();
if(this.handleValidation()){
alert("Form submit");
}
}
//Cancel Form
onCancel(e){
e.preventDefault();
alert("Cancel");
// e.target.reset();
}
<button type="submit" className="btn btn-success active" onClick={this.onSubmit}><b>Create</b></button>
<button type="button" className="btn btn-warning"><b>Preview</b></button>
<button type="button" className="btn btn-danger" onClick={this.onCancel}><b>Cancel</b></button>
Edited your codesandbox to get it working: https://codesandbox.io/s/m4x7j1jm19
Note that if you set fields to an empty object in your cancel function, then you have to be sure to set each field to an empty string in your input values (I just did the first field):
value={this.state.fields["event_bucket"] || ''}
Get all input field in state, after reset state with help of setState() function.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
</head>
<body>
<div id="input"></div>
<script type="text/babel">
var FormField = React.createClass({
getInitialState: function(){
return {
name:"Vijayabal"
}
},
resetData : function(){
this.setState({
name : ''
});
},
render : function(){
return (
<div>
<input type="text" value = {this.state.name}/>
<button onClick = {this.resetData}>Submit</button>
</div>
)
}
});
ReactDOM.render(<FormField/>, document.getElementById('input'));
</script>
</body>
</html>
I recommend making the input a controlled input. Try this on for size:
class ComponentName extends Component {
constructor(props){
super(props)
this.state = {
myValue: ''
}
this.clearData = this.clearData.bind(this)
this.handleChangeTextbox = this.handleChangeTextbox.bind(this)
this.onSubmit = this.onSubmit.bind(this)
this.onCancel = this.onCancel.bind(this)
}
clearData(){
this.setState({
myValue: ''
})
}
handleValidation(){
return 'whatever'
}
handleChangeTextbox(e){
this.setState({
myValue: e.target.value
})
}
onSubmit(e){
e.preventDefault();
if(this.handleValidation()){
alert("Form submit")
this.clearData()
}
}
onCancel(e){
e.preventDefault()
alert("Cancel")
this.clearData()
}
render() {
return (
<div>
<textarea value={this.state.myValue} onChange={this.handleChangeTextbox} />
<button type="submit" className="btn btn-success active" onClick={this.onSubmit}><b>Create</b></button>
<button type="button" className="btn btn-warning"><b>Preview</b></button>
<button type="button" className="btn btn-danger" onClick={this.onCancel}><b>Cancel</b></button>
</div>
)
}
}
See it work here: https://stackblitz.com/edit/so-answer-httpsstackoverflowcomquestions47240386how-to-clear
