/** * 父组件 -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 = {}, type } = this.state; return ( <div> test应用的事test里的form表单 俗称子表单 <Test.Form data={data} type={type}></Test.Form> </div> ); }}test的表单子组件
/** * form 的组件 -start */class TestForm extends PureComponent { render() { const { getFieldDecorator, getFieldValue } = this.props.form; let { data = {}, type } = this.props; if (type === "edit") { getFieldDecorator("id", { initialValue: data.id, }); } return ( <Form className="test-form" onSubmit={(e) => { 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, }} > <Form.Item label="小郑喜爱吃西瓜吗？" extra={""}> {getFieldDecorator("sex_type", { initialValue: data.sex_type || "no", rules: [ { required: true, message: "小郑是的吧", }, ], })( <Select placeholder="快答复是的" allowClear> {[ { label: "是的", value: "yes" }, { label: "不是", value: "no" }, ].map((item, index) => { return ( <Select.Option key={index} value={item.value}> {item.label} </Select.Option> ); })} </Select> )} </Form.Item> {/* 性别 */} {getFieldValue("sex_type") === "no" && ( <Form.Item label="性别"> {getFieldDecorator("sex", { initialValue: data.sex || "man", })( <Radio.Group> <Radio value="man">男</Radio> <Radio value="woman">女</Radio> </Radio.Group> )} </Form.Item> )} {/* 子组件 */} <Form.Item label="child1"> {getFieldDecorator("child1", { initialValue: ["1"], })(<Child show={true}></Child>)} </Form.Item> <Form.Item label="child2"> {getFieldDecorator("child2", { initialValue: [], })(<Child show={false}></Child>)} </Form.Item> <Form.Item label="child3"> {getFieldDecorator("child3", { initialValue: ["2"], })(<Child form={this.props.form} data={data}></Child>)} </Form.Item> <Form.Item labelCol={{ span: 0, }} wrapperCol={{ span: 24, }} > <Button htmlType="submit">提交1</Button> <Button htmlType="button" onClick={(e) => { e.preventDefault(); console.error("提交2的提交"); this.props.form.validateFields((err, values) => { if (!err) { console.log("Received values of form: ", values); } }); }} > 提交2 </Button> <Button htmlType="button" onClick={() => { console.error("我是一个重置按钮"); this.props.form.resetFields(); }} > 重置 </Button> <Button htmlType="button" onClick={() => { console.error("我是一个一般按钮"); }} > 一般按钮 </Button> </Form.Item> </Form> ); }}//真的form Form.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 = {}, 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 ( <div> {/* 把父组件所有的货色都给了子组件 ...otherProps 父组件其余的数据*/} <Checkbox.Group {...otherProps}> <Checkbox value="1">1</Checkbox> <Checkbox value="2">2</Checkbox> </Checkbox.Group> {show ? "有show" : "没有show"} <Form.Item label="child.input"> {this.form?.getFieldDecorator("child.input", { initialValue: data?.child?.input, rules: [ { required: true, message: "不能为空", }, ], })(<Input allowClear placeholder="-child.input"></Input>)} </Form.Item> </div> ); }}