reactjs - I cannot clear input on submitting form -
i using reactjs coupled redux-form.
and using semantic ui react library
when want submit form, don't want page refreshed. instead want reset form after submission.
unfortunately, can't clear input whereas set state void value.
/** form component **/ <form onsubmit={handlesubmit(this.handlesubmitaction)}> <field name="input" component={rendertitleinput} onchangeaction={this.handleinputchange} defaultvalue={this.state.input} /> <input type="submit" name="submit" /> </form> /** handlesubmit function **/ handlesubmitaction = (e) => { this.setstate({input:''}) }
the field remain filled after submitting form.
any suggestion ? thanks
what created uncontrolled component, means update must handled through dom. need add ref
attribute access dom element in form submit callback. here changes need make.
<form onsubmit={handlesubmit(this.handlesubmitaction)}> <field name="input" component={rendertitleinput} onchangeaction={this.handleinputchange} defaultvalue={this.state.input} ref={(input) => this.input = input} /> <input type="submit" name="submit" /> </form> /** handlesubmit function **/ handlesubmitaction = (e) => { // can used when using controlled component. //this.setstate({input:''}) this.input.val = ''; }
but maybe want handle controlled component.
Comments
Post a Comment