import { Button, Modal, Form, Input, Radio } from \'antd\'; const CollectionCreateForm = Form.create({ name: \'form_in_modal\' })( // eslint-disable-next-line class extends React.Component { render() { const { visible, onCancel, onCreate, form } = this.props; const { getFieldDecorator } = form; return ( <Modal visible={visible} title="Create a new collection" okText="Create" onCancel={onCancel} onOk={onCreate} > <Form layout="vertical"> <Form.Item label="Title"> {getFieldDecorator(\'title\', { rules: [{ required: true, message: \'Please input the title of collection!\' }], })(<Input />)} </Form.Item> <Form.Item label="Description"> {getFieldDecorator(\'description\')(<Input type="textarea" />)} </Form.Item> <Form.Item className="collection-create-form_last-form-item"> {getFieldDecorator(\'modifier\', { initialValue: \'public\', })( <Radio.Group> <Radio value="public">Public</Radio> <Radio value="private">Private</Radio> </Radio.Group>, )} </Form.Item> </Form> </Modal> ); } }, ); class CollectionsPage extends React.Component { state = { visible: false, }; showModal = () => { this.setState({ visible: true }); }; handleCancel = () => { this.setState({ visible: false }); }; //获得表单数据，并且打印出来 handleCreate = () => { const form = this.formRef.props.form; form.validateFields((err, values) => { if (err) { return; } console.log(\'Received values of form: \', values); form.resetFields(); this.setState({ visible: false }); }); }; saveFormRef = formRef => { this.formRef = formRef; }; render() { return ( <div> <Button type="primary" onClick={this.showModal}> New Collection </Button> <CollectionCreateForm //父子组件之间传递表单数据 wrappedComponentRef={this.saveFormRef} visible={this.state.visible} onCancel={this.handleCancel} onCreate={this.handleCreate} /> </div> ); } } ReactDOM.render(<CollectionsPage />, mountNode);