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

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