无法在另一个组件内渲染antd的表单组件

时间:2019-03-15 06:49:43

标签: javascript reactjs typescript antd

我创建了一个简单的组件,将antd的form封装在antd的modal中。我想将以下组件呈现在另一个组件中。

 class MOCForm extends Component<FormComponentProps & mprops, mocFormState> {

    constructor(props) {
        super(props);

        this.state = {
        showMOCModal: false,
        confirmMOCLoading: false
        };
    }

    async saveNewMOC() {
        this.setState({
        confirmMOCLoading: true
        });

        this.props.form.validateFieldsAndScroll(async (err, values) => {
            if (!err) {
                await addMOC({
                name: values.new_moc
                });

                /**
                * After the data is saved, stop the loader
                */
                this.setState({
                    confirmMOCLoading: false,
                    showMOCModal: false
                });
            }
        });
    }

    closeMOCModal() {
        this.setState({
        showMOCModal: false
        });
    }

    render() {
        return (
        <Modal
            title="Create a New MOC"
            visible={this.state.showMOCModal}
            onOk={this.saveNewMOC}
            confirmLoading={this.state.confirmMOCLoading}
            onCancel={this.closeMOCModal}
        >
            <Form onSubmit={this.saveNewMOC}>
            <FormItem label="Name">
                {this.props.form.getFieldDecorator("new_moc", {
                rules: [
                    {
                    required: true,
                    message: "Please fill the name of this MOC to add"
                    }
                ]
                })(<Input />)}
            </FormItem>
            </Form>
        </Modal>
        );
    }
}

要呈现上述表单组件,我在另一个组件内做了以下操作:

    const modalForm = Form.create({})(MOCForm);

    .
    .
    render() {
       <modalForm />
    }

但是我收到一条错误消息,说Property 'modal' does not exist on type 'JSX.IntrinsicElements'.ts(2339)我也尝试了以下操作:

{modalForm}

但是然后我收到另一个错误,说:Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render. Or maybe you meant to call this function rather than return it.

如何将上述组件呈现在另一个组件中?我在做什么错?

0 个答案:

没有答案