ProForm中的ProFormSwitch 联动问题

343 阅读1分钟

react版本:17.0.2

ProComponents

问题: switch1(name:test1)组件 关闭,switch2(name:test2)组件 也关闭关闭, 但是手动点击了swtich2以后 。switch1组件就无法在控制switch2的联动。使用useState是不可以的。 需要使用setFieldValue 来控制才可以。如下代码:

import {
  ProForm,
  ProFormRadio,
  ProFormText,
  ProFormSwitch,
} from "@ant-design/pro-components";
import { Col, Row, Space, message, Form, Switch } from "antd";
import { useState, useRef } from "react";
import type { ProFormInstance } from "@ant-design/pro-form";

type LayoutType = Parameters<typeof ProForm>[0]["layout"];
const LAYOUT_TYPE_HORIZONTAL = "horizontal";

const waitTime = (time: number = 100) => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(true);
    }, time);
  });
};

export default () => {
  const [formLayoutType, setFormLayoutType] = useState<LayoutType>(
    LAYOUT_TYPE_HORIZONTAL
  );
  const formRef = useRef<ProFormInstance>();

  const [test, setTest] = useState<Boolean>(false);

  const needPubWxChange = (e) => {
    console.log90(e);
  };
  const formItemLayout =
    formLayoutType === LAYOUT_TYPE_HORIZONTAL
      ? {
          labelCol: { span: 4 },
          wrapperCol: { span: 14 },
        }
      : null;

  return (
    <ProForm<{
      name: string;
      company?: string;
      useMode?: string;
    }>
      {...formItemLayout}
      formRef={formRef}
      layout={formLayoutType}
      submitter={{
        render: (props, doms) => {
          return formLayoutType === LAYOUT_TYPE_HORIZONTAL ? (
            <Row>
              <Col span={14} offset={4}>
                <Space>{doms}</Space>
              </Col>
            </Row>
          ) : (
            doms
          );
        },
      }}
      onFinish={async (values) => {
        await waitTime(2000);
        console.log(values);
        message.success("提交成功");
      }}
      params={{}}
      request={async () => {
        await waitTime(100);
        return {
          name: "qqqqqqq",
          useMode: "chapter",
        };
      }}
    >
      <ProFormSwitch
        name="test1"
        label="test1"
        onChange={(e) => {
          console.log(123, e);
          console.log(formRef);
          formRef.current.setFieldValue("test2", false);
          setTest(e);
        }}
      />
      {/* <Form.Item shouldUpdate={(prevValues, currentValues) => {}}>
        {({ getFieldValue, setFieldValue }) => {
          setFieldValue("test2", false);
          return <div>asdff</div>;
        }}
      </Form.Item> */}
      <div style={{ display: test ? "none" : "block" }}>
        <ProFormSwitch name="test2" label="test2" />
      </div>
    </ProForm>
  );
};

这样就可以实现联动了。 就算手动开关switch2(name:test2)