componentDidMount（）或其他地方的antd定义<formitem>会导致冻结输入字段

Question

我刚刚开始学习React，并试图使用antd来构建一些东西。但我遇到了这个问题。

当声明<FormItem />外部渲染功能并在以后使用它时会导致不可更改的字段。

请参阅此片段：

import React from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import "./index.css";
import { Form, Icon, Input, Button, Checkbox } from "antd";
const FormItem = Form.Item;

class CustomizedForm extends React.Component {
  handleSubmit = e => {
    e.preventDefault();
  };
  state = {
    ready: false
  };
  componentDidMount() {
    const { getFieldDecorator } = this.props.form;
    this.formItem = (
      <FormItem>{getFieldDecorator("field1")(<Input />)}</FormItem>
    );
    this.setState({ ready: true });
  }
  render() {
    return (
      <Form onSubmit={this.handleSubmit} className="login-form">
        {this.state.ready === true ? this.formItem : null}
      </Form>
    );
  }
}

const WrappedNormalLoginForm = Form.create()(CustomizedForm);

ReactDOM.render(
  <WrappedNormalLoginForm />,
  document.getElementById("container")
);

In Codesandbox

在这个片段中，我在componentDidMount（）中声明了<FormItem />，并在稍后呈现。但渲染字段的值是不可更改的，

但是，如果我按照antd网站中说明的方式，在渲染函数中声明<FormItem />：

import React from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import "./index.css";
import { Form, Icon, Input, Button, Checkbox } from "antd";
const FormItem = Form.Item;

class CustomizedForm extends React.Component {
  handleSubmit = e => {
    e.preventDefault();
  };
  render() {
    const { getFieldDecorator } = this.props.form;
    this.formItem = (
      <FormItem>{getFieldDecorator("field1")(<Input />)}</FormItem>
    );
    return (
      <Form onSubmit={this.handleSubmit} className="login-form">
        {this.formItem}
      </Form>
    );
  }
}

const WrappedNormalLoginForm = Form.create()(CustomizedForm);

ReactDOM.render(
  <WrappedNormalLoginForm />,
  document.getElementById("container")
);

In Codesandbox

通过执行此操作，将呈现正常输入字段，并且可以在其中键入值。 在前一种方法中，数据绑定似乎出了问题，我想知道为什么会发生这种情况，因为我看不出这两种方法之间存在太大差异。

我真的很感激任何帮助，谢谢。