/**
* 父组件 -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>
);
}
}