react版本:17.0.2
问题: 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)