Question

我有一个带有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}

发布resetFields（）： {breed: undefined, gender: undefined, ageYears: undefined, ageMonths: undefined, neutered: false}

但是输入字段中的值本身根本没有改变。

我尝试在resetFields之后调用setState，也尝试使用设置为initialValues的{{1}}，但到目前为止没有任何结果。我的''组件本身不重新渲染吗？如果我要更新这里显示的状态，不是吗？

蚂蚁设计resetFields（）不清除输入

0 个答案: