Deselect 复选框基于 ProComponents React 中的下拉 select 值

Question

本演示中使用的 ProComponents 资源。

ProForm 与 ProModal
ProFormCheckBox.Group
ProFormSelect

每次我 select 一个新项目时，我都试图取消 select 所有复选框。因此，例如，如果我从下拉列表中 select PCA 并选中框 2。 Example 1 然后从下拉菜单切换到 LSCA 我想取消 select 所有复选框。 Example 2 相反，复选框 2 发生的情况仍然是 selected。 Example 3

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

  // 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 的运行 onChange。这应该运行 setMarkedCheckBoxes 将状态设置为一个空数组，这样就不会 select 编辑框了。

  /** 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 Dev Tools 并确认已根据新下拉项 selected 更新 markedCheckBoxes 的值，这应该是一个空数组。我还测试了当我取消或提交 modalForm 时，markedCheckBoxes 是一个空数组，并且通过在 ProFormCheckbox.Group 上设置值来正确显示。因此，我对如何在更新 select 菜单后正确显示 ProFormCheckbox.Group 中的值感到困惑。以下是所述 RowModal 组件的完整代码片段。

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 is a repackaging of 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
})

Deselect 复选框基于 ProComponents React 中的下拉 select 值

Deselect checkboxes based on dropdown select value in ProComponents React

checkbox

reactjs

dropdown

antd

ant-design-pro