关于javascript: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>
    );
  }
}