Question

我有一个模态，里面有一个形式。该模态由其父代控制。它的父级可以为新表单打开模态空白，也可以发送数据以便使用同一表单进行编辑。

我的父组件渲染如下：

// current can be empty if the user is not editing the data
// visible control if the modal should be open or not
<TemplateModalCreate
  current={current}
  onTest={this.handleModalCreateTest}
  onSelectType={this.handleGetIndexes}
  onSubmit={this.handleModalCreateSubmit}
  onClose={this.handleModalCreateClose}
  visible={visibleModalCreate}
/>

在我的模态组件内部，有一个带有验证的表格。这就是发生错误的地方。

我有几个这样的Form.Item组件：

// validating the field date
const dateError = isFieldTouched('date') && getFieldError('date');

// an example of its strucuture
<Form.Item
  hasFeedback
  help={dateError || ''}
  label="Valid date between"
  validateStatus={dateError ? 'error' : ''}
>
  {
    getFieldDecorator('date', {
      rules: [{ required: true, message: 'Please choose a date range' }],
      initialValue: current.from && [moment(current.from, 'YYYY-MM-DD'), moment(current.to, 'YYYY-MM-DD')],
    })(
      <RangePicker format="YYYY-MM-DD" />,
    )
  }
</Form.Item>

在 componentDidMount 内部，我具有以下代码来验证表单：

componentDidMount() {
  const { form } = this.props;
  form.validateFields();
}

当我不使用 form.validateFields（）时，它会正确填写该版本的表单，如果我使用它，它将无法填写该表单。

任何人都可以告诉我这是一个错误还是在这里做错了什么？

我正在使用Ant Design 3.8.2和React 16.4.1。

UPDATE V1

我在代码沙箱上创建了示例，以更好地说明这种情况。您可以在这里https://codesandbox.io/s/2v7q8023xj

进行检查

要重现正在发生的事情，请按照以下步骤操作：

单击任何“编辑”按钮
将出现模式，并且字段不会被填充
关闭模式
再次单击任何“编辑”按钮
您将看到填充的字段

Ant Design组件initialValue不适用于validateFields

0 个答案: