zackify / validify

Simple-as-possible React form validation

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

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!

@zackify I just tested it. It works like a charm! Thanks