Ant design resetFields() not clearing input

Question

I have an ant Form component with an Input component. The form is wrapped inside of a redux connect() container because I need to access a dispatch handler for one of my Form fields (an Autocomplete).

When I submit my form, I'm attempting to have the fields clear (the Form component should re-render because on submission I'm changing a value in the parent) and allow them to be resubmitted.

However, using the documented this.props.form.resetFields(), though it is clearing the form fields, is not clearing the input fields (my Form component still has the previously submitted fields),

relevant snippets:

FormItem in my Form component

        
        {getFieldDecorator('ageYears', {
              rules: [
                {
                  validateTrigger: ['onBlur'],
                  validator: (rule, value, callback) => {
                    const isValid = (value) => {
                      const intVal = parseInt(value)
                      const validRange = range(0,30)
                      return (intVal && (validRange.indexOf(intVal) > -1)) || (intVal === 0)
                    }
                    if (!isValid(value)) {
                      callback('Please enter a valid age.', value)
                    }
                    else {
                      callback()
                    }
                  }
                }
            ],
          })(
          
            
          
          )}

submit handler

  handleSubmit = (e) => {
      e.preventDefault();
      this.props.form.validateFields((err, values) => {
          if (!err) {
            const dogs = this.state.dogs.map(dog => Object.assign({}, dog));
            const idx = dogs.findIndex(i => i.active)
            this.handleUpdateDogIdx(idx, values, dogs);
          }
      });
  }

setting the state of the Form component for use elsewhere

handleUpdateDogIdx = (idx, values, dogs) => {
    this.setState(
      {
      dogs: dogs.map((dog) =>
        dog.active ? { ...dog, ...values, valid: true, active: false } : (
          (dogs.indexOf(dog) === idx+1) && (idx+1 < dogs.length) ? {...dog, active: true} : dog),
      )
    }, () => {
      console.log(this.props.form.getFieldsValue())
      this.props.handleDog(this.state.dogs);
      (idx + 1) < dogs.length ? this.props.form.resetFields() : this.props.handleNext(this.props.current);
      console.log(this.props.form.getFieldsValue())
    }
    )
  }

The last snippet produces the following objects in the console as one would expect:

pre: {breed: "Thai Ridgeback", gender: "female", ageYears: "2", ageMonths: "4", neutered: true}

post resetFields(): {breed: undefined, gender: undefined, ageYears: undefined, ageMonths: undefined, neutered: false}

however the values in the input fields themselves haven't changed at all.

I've attempted calling resetFields after setStateand I've also attempted using initialValues set to '' but nothing so far has yielded any results. Is my Form component itself not re-rendering? Shouldn't it be if I'm updating state as shown here?

Ant design resetFields() not clearing input

0 Answers