if I declare < FormItem / > outside of render (such as within componentDidMount), and then render it, the resulting form cannot be entered, such as:
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")
);
but the internal declaration in render can be used normally, for example:
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")
);
what is the cause of this problem?
because the two ways look almost the same, and is it possible to generate < FormItem / > outside of render and use it properly?
Thank you!
