Can't clear value of inputs after form submit
IevgenNov opened this issue · comments
If you try to clear fields in onClick function, your state will be cleared but visually inputs still relies on old values
this.setState({ values: { description: '', note: '', amount: '', }, })
Are you passing in values explicitly?
export default class Test extends React.Component {
constructor() {
super()
this.state = { values: {} }
}
render() {
return (
<Form values={this.state.values} onValues={values => this.setState({ values })}
>
<Input name="description" />
<div
submit
onClick={values => this.setState({ values: { description: '' })}
>
Submit!
</div>
</Form>
)
Can you show your code if you're on the latest version?
Sure, here is a small example. I placed console.log in render function. Just hit submit, and you will see the difference between component state and input's value
import React from 'react';
import Form from 'react-validify';
const Input = ({ error, ...props }) => (
<div>
<p>{error}</p>
<input {...props} />
</div>
);
export default class Test extends React.Component {
constructor() {
super();
this.state = {
values: {
description: '',
},
}
}
submitForm = () => {
// here goes code to POST data on server, when server responds with OK i have to clear state
this.setState({
values: {
description: '',
},
})
};
render() {
console.log(this.state);
return (
<Form
values={this.state.values}
rules={{
description: 'required',
}}
onValues={values => this.setState({ values })}>
<Input name="description" value={this.state.values.description} />
<button
submit
onClick={this.submitForm}
>
Submit
</button>
</Form>
)
}
}
Thanks, I was just going to mess with this in a fresh create react app. Looking into it now.
Haha, the state was getting mutated on accident. Fixed it (and added a test), install 2.0.5
and this is solved!