基于ProComponents React中下拉选择值的取消选中复选框

Question

用于本演示中使用的ProComponents的资源。

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

每次选择新项目时，我都试图取消选中所有复选框。因此，例如，如果我从下拉列表中选择PCA并选中boxed 2。然后，示例1从下拉菜单切换到LSCA，我想取消选中所有复选框。相反，仍然选中“发生什么”复选框2。示例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的onChange。这应该运行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);
  };

根据文档，我应该将值设置为在checkBoxes中标记的值。

  <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工具，并根据选择新的下拉项(应该是空数组)来更新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是antd表单的重新打包。

所以你可以用表单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
})