根据 ProComponents React 中的下拉选择值取消选择复选框

Question

本演示中使用的 ProComponents 资源。

• ProForm 与 ProModal 相同的属性
• ProFormCheckBox.Group
• ProFormSelect

每次选择新项目时，我都会尝试取消选择所有复选框。 例如，如果我从下拉列表中选择 PCA 并选中框 2。 Example 1 然后从我想取消选择所有复选框的下拉列表中切换到 LSCA。 Example 2 相反，会发生什么复选框 2 仍处于选中状态。 Example 3

我设置了每个下拉项都设置了不同的复选框列表。 它们是四个不同的数组。更有趣的部分是三个不同的 useState。一个控制选择哪个下拉项的状态。另一个控制应显示哪个复选框数组的状态。最后一个控制应标记哪些复选框的状态。代码中感兴趣的注释是

  // Controls the state of the dropdown menu to be selected
  const [selected, setSelected] = useState('');
  // Controls the state of which array of checkboxes should be displayed
  const [checkBoxes, setCheckBoxes] = useState([]);
  // Controls the state of which checkboxes are checkmarked
  const [markedCheckBoxes, setMarkedCheckBoxes] = useState([]);

接下来感兴趣的代码是函数 changeSelectOptionHandler，它在 ProFormSelect 的更改上运行。这应该运行 setMarkedCheckBoxes 将状态设置为一个空数组，因此不会选择任何框。

  /** Function that will set different values to state variable
   * based on which dropdown is selected
   */
  const changeSelectOptionHandler = (event) => {
    // This should set the state of the setMarkedCheckBoxes to be empty
    setMarkedCheckBoxes([]);
    // Sets the state of which array of checkboxes should be displayed based on event
    checkBoxOptions(event);
    // Sets the state of which dropdown is selected based on the event
    setSelected(event);
  };

根据文档，我应该将值设置为应在 ProFormCheckbox.Group 中标记的复选框

  <ProFormCheckbox.Group
    name="rows"
    label="Select Rows"
    options={checkBoxes}
    onChange={(e) => {
      console.log('state changes');
      setMarkedCheckBoxes(e);
    }}
    // This is where I set which checkboxes should be marked with value
    // initialValue={markedCheckBoxes}
    value={markedCheckBoxes}
  />

我能够使用 React 开发工具并根据何时选择新的下拉项（应该是一个空数组）来确认标记的CheckBoxes 的值已更新。我还测试了当我取消或提交 modalForm 时，markedCheckBoxes 是一个空数组，并且通过在 ProFormCheckbox.Group 上设置值正确显示。所以我很困惑如何在更新选择菜单后正确显示 ProFormCheckbox.Group 中的值。以下是上述 RowModal 组件的完整代码 sn-p。

import { PlusOutlined } from '@ant-design/icons';
import { Button, message } from 'antd';
import { useState } from 'react';

import ProForm, { ModalForm, ProFormSelect, ProFormCheckbox } from '@ant-design/pro-form';
import { updateRule } from '@/services/ant-design-pro/api';

const RowModal = ({ orderId, actionRef }) => {


  /** Different arrays for different dropdowns */
  const eca = ['1', '2', '3', '4', '5'];
  const pca = ['1', '2'];
  const lsca = ['1', '2', '3', '4', '5', '6'];
  const mobility = ['1', '2', '3', '4'];

  // Controls the state of the dropdown menu to be selected
  const [selected, setSelected] = useState('');
  // Controls the state of which array of checkboxes should be displayed
  const [checkBoxes, setCheckBoxes] = useState([]);
  // Controls the state of which checkboxes are checkmarked
  const [markedCheckBoxes, setMarkedCheckBoxes] = useState([]);

  /** Function that will set different values to state variable
   * based on which dropdown is selected
   */
  const changeSelectOptionHandler = (event) => {
    // This should set the state of the setMarkedCheckBoxes to be empty
    setMarkedCheckBoxes([]);
    // Sets the state of which array of checkboxes should be displayed based on event
    checkBoxOptions(event);
    // Sets the state of which dropdown is selected based on the event
    setSelected(event);
  };

  /** This will be used to create set of checkboxes that user will see based on what they select in dropdown*/
  const checkBoxOptions = (event) => {
    /** Setting Type variable according to dropdown */
    if (event === 'ECA') setCheckBoxes(eca);
    else if (event === 'PCA') setCheckBoxes(pca);
    else if (event === 'LSCA') setCheckBoxes(lsca);
    else if (event === 'Mobility') setCheckBoxes(mobility);
    else setCheckBoxes([]);
  };

  return (
    <ModalForm
      title="Assign to Area and Row"
      trigger={
        <Button type="primary">
          <PlusOutlined />
          Assign
        </Button>
      }
      autoFocusFirstInput
      modalProps={{
        destroyOnClose: true,
        onCancel: () => {
          setSelected('');
          setCheckBoxes([]);
          setMarkedCheckBoxes([]);
        },
      }}
      onFinish={async (values) => {
        const newValues = { ...values, order: orderId };
        const req = await updateRule('http://127.0.0.1:3000/api/v1/floorPlans', {
          data: newValues,
        });

        message.success('Success');
        setSelected('');
        setCheckBoxes([]);
        setMarkedCheckBoxes([]);
        actionRef.current?.reloadAndRest?.();
        return true;
      }}
      // initialValues={{ rows: ['A'] }}
    >
      <ProForm.Group>
        <ProFormSelect
          request={async () => [
            {
              value: 'PCA',
              label: 'PCA',
            },
            {
              value: 'ECA',
              label: 'ECA',
            },
            {
              value: 'LSCA',
              label: 'LSCA',
            },
            {
              value: 'Mobility',
              label: 'Mobility',
            },
          ]}
          // On change of dropdown, changeSelectOptionHandler will be called
          onChange={changeSelectOptionHandler}
          width="xs"
          name="area"
          label="Select Area"
          value={selected}
        />
      </ProForm.Group>
      <ProFormCheckbox.Group
        name="rows"
        label="Select Rows"
        options={checkBoxes}
        onChange={(e) => {
          console.log('state changes');
          setMarkedCheckBoxes(e);
        }}
        // This is where I set which checkboxes should be marked with value
        // initialValue={markedCheckBoxes}
        value={markedCheckBoxes}
      />
    </ModalForm>
  );
};

export default RowModal;

提前致谢！

Answer 1

ProForm 是对 antd Form 的重新包装

所以你可以使用Form API 来达到你的目的

import { useForm } from 'antd/lib/form/Form'

//...
const [form] = useForm();

// and then pass FormInstance in your component

<ModalForm
  form={form}
  //...
/>

// then in your handlers where you want to modify values use

form.setFieldsValue({
  "fieldName": value
})