How To Clear Data In Textbox In Reactjs
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 onSubm
Solution 1:
Get all input field in state, after reset state with help of setState() function.
<!DOCTYPE html><htmllang="en"><head><title>Bootstrap</title><metacharset="utf-8"><metaname="viewport"content="width=device-width, initial-scale=1"><linkrel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react-dom.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script></head><body><divid="input"></div><scripttype="text/babel">varFormField = React.createClass({
getInitialState: function(){
return {
name:"Vijayabal"
}
},
resetData : function(){
this.setState({
name : ''
});
},
render : function(){
return (
<div><inputtype="text"value = {this.state.name}/><buttononClick = {this.resetData}>Submit</button></div>
)
}
});
ReactDOM.render(<FormField/>, document.getElementById('input'));
</script></body></html>Solution 2:
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"] || ''}
Solution 3:
I recommend making the input a controlled input. Try this on for size:
classComponentNameextendsComponent{
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
Post a Comment for "How To Clear Data In Textbox In Reactjs"