Ant design resetFields () не очищает ввод - PullRequest
Новая
       28

Ant design resetFields () не очищает ввод

0 голосов
/ 24 декабря 2018

У меня есть компонент ant Form с компонентом Input.Форма обернута внутри контейнера redux connect(), потому что мне нужно получить доступ к обработчику отправки для одного из моих полей Form (Autocomplete).

Когда я отправляю свою форму, яЯ пытаюсь очистить поля (компонент Form должен выполнить повторную визуализацию, поскольку при отправке я изменяю значение в родительском элементе) и разрешить их повторную отправку.

Однако, используя документированные this.props.form.resetFields(), хотя он очищает поля формы, не очищает поля ввода (мой компонент Form все еще имеет ранее отправленные поля),

соответствующие фрагменты:

FormItemв моем компоненте формы 

        <FormItem>
        {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()
                    }
                  }
                }
            ],
          })(
          <Col>
            <Input placeholder="Years"/>
          </Col>
          )}
        </FormItem>

обработчик отправки 

  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);
          }
      });
  }

установка состояния компонента формы для использования в другом месте 

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())
    }
    )
  }

Последний фрагмент создает в консоли следующие объекты, как и следовало ожидать:

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

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

однако значения в самих полях ввода не изменились привсе.

Я пытался дозвониться до resetFields после setState, и я также пытался использовать initialValues, установленный на '', но пока ничего не дало никаких результатов.Мой Form компонент не перерисовывается?Разве это не должно быть, если я обновляю состояние, как показано здесь?

...