Resources for ProComponents that are being used in this demo.
I am trying to deselect all checkboxes every time I select a new item. So for example if I select PCA from the dropdown and checked boxed 2. Example 1 Then switched over to LSCA from the dropdown I want to deselect all checkboxes. Example 2 Instead, what happens check box 2 is still selected. Example 3
I have it set where each dropdown item has a different list of checkboxes set into it. They are four different arrays. The more interesting parts are the three different useState. One controls the state of which dropdown item is selected. Another controls the state of which array of checkboxes should be displayed. The last controls the state of which checkboxes should be marked. Notes of interest in the code are
// 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([]);
Next code of interest is the function changeSelectOptionHandler which is run onChange of the ProFormSelect. This should run setMarkedCheckBoxes to set the state into an empty array so no boxes are selected.
/** 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);
};
According to the docs I should set the value as what checkBoxes should be marked in 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}
/>
I was able to use the React Dev Tools and confirm values are updated for markedCheckBoxes based on when a new dropdown item is selected which should be an empty array. I also tested that when I cancel or submit the modalForm that markedCheckBoxes is an empty array and is correctly displayed with setting the value on the ProFormCheckbox.Group. So I am stumped on how to correctly display what is on the value in ProFormCheckbox.Group after updating the select menu. Below is the full code snippet of said RowModal component.
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;
Thanks in advance!
ProForm is a repackaging of antd Form
So you can use Form API for your purpose
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
})