react 父子传值_React学习——通过模态框中的表单学习父子组件之间传值

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 (

visible={visible}

title="create a new collection"

oktext="create"

oncancel={oncancel}

onok={oncreate}

>

{getfielddecorator('title', {

rules: [{ required: true, message: 'please input the title of collection!' }],

})()}

{getfielddecorator('description')()}

{getfielddecorator('modifier', {

initialvalue: 'public',

})(

public

private

,

)}

);

}

},

);

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 (

new collection

//父子组件之间传递表单数据

wrappedcomponentref={this.saveformref}

visible={this.state.visible}

oncancel={this.handlecancel}

oncreate={this.handlecreate}

/>

);

}

}

reactdom.render(, mountnode);