antd|antd Form 表单基础使用及子组件传值 antdForm表单基础使用及子组件传

文章图片

/** * 父组件 -start */ class Test extends PureComponent { state = { data: {}, type: void 0 }; componentDidMount() { // this.setState({ //type: "edit", //data: { //sex_type: "no", //id: "sb", //info: "33", //sex: "man", //child: { //info: "000", //input: "i2", //sex: "man", //}, //}, // }); }render() { let { data = https://www.it610.com/article/{}, type } = this.state; return (test 使用的事test里的form表单俗称子表单 ); } }

【antd|antd Form 表单基础使用及子组件传值】test的表单子组件

/** * form 的组件 -start */ class TestForm extends PureComponent { render() { const { getFieldDecorator, getFieldValue } = this.props.form; let { data = https://www.it610.com/article/{}, type } = this.props; if (type ==="edit") { getFieldDecorator("id", { initialValue: data.id, }); } return ( { e.preventDefault(); console.error("提交1的提交"); this.props.form.validateFields((err, values) => { if (!err) { console.log("Received values of form: ", values); } }); }} // 输入框前面的文字距离 labelCol={{ span: 12, }} // 输入框的距离一共加起来不能超过24 wrapperCol={{ span: 12, }} > {getFieldDecorator("sex_type", { initialValue: data.sex_type || "no", rules: [ { required: true, message: "小郑是的吧", }, ], })({[ { label: "是的", value: "yes" }, { label: "不是", value: "no" }, ].map((item, index) => { return ({item.label}); })})} {/* 性别 */} {getFieldValue("sex_type") === "no" && ( {getFieldDecorator("sex", { initialValue: data.sex || "man", })( 男女 )} )} {/* 子组件 */} {getFieldDecorator("child1", { initialValue: ["1"], })()} {getFieldDecorator("child2", { initialValue: [], })()} {getFieldDecorator("child3", { initialValue: ["2"], })()} ); } }//真的formForm.create是创建一个form 这样就可以使用里面其方法 Test.Form = Form.create({ name: "normal_login" })(TestForm); /** * form 的组件 -end */ export default Test;

test内容的子组件

class Child extends PureComponent { get form() { return this.props.form; } render() { let { show, data = https://www.it610.com/article/{}, form, ...otherProps } = this.props; if (this.form) { this.form.getFieldDecorator("child.info", { initialValue: data?.child?.info, }); this.form.getFieldDecorator("child.sex", { initialValue: data?.child?.sex, }); }return ({/* 把父组件所有的东西都给了子组件...otherProps 父组件其他的数据*/} 1 2 {show ? "有show" : "没有show"} {this.form?.getFieldDecorator("child.input", { initialValue: data?.child?.input, rules: [ { required: true, message: "不能为空", }, ], })()} ); } }