弹窗内表格复选框重置

芋圆社区 > 编程 > Ant Design > 弹窗内表格复选框重置

390

2023-07-26

Hey、小怪兽

• 记录一个很简单的小问题：弹窗内表格复选框重置
• 这是一个弹窗内的带有复选框的表格，当勾选了几个设备以后，关闭弹窗，打开弹窗发现这些设备还是勾选的
• 正确的现象应该是关闭弹窗后再打开弹窗已经选择的复选框都要重置
• 看到代码里面用useState存储了这个勾选框的变量数据：

const [selectedList, setSelectedList] = useState([]);

• 找到弹窗的代码：

<Modal
  title={title}
  open={visible}
  onOk={handleOk}
  onCancel={handleCancel}
  forceRender
  destroyOnClose={true}
>
...其他代码
</Modal>

• 加了destroyOnClose，这个东西也就是让弹窗关闭时销毁Modal里的子元素，这个重置不了弹窗里复选框的勾选
• 继续看关闭的方法handleCancel：

const handleCancel = () => {
  setSelectedList([]);
  ...其他代码
};

• 可以看到关闭的时候已经把这个复选框的变量重置为空数组了
• 没有生效的原因很简单，就是没有设置selectedRowKeys，指定选中项的key数组，之前没有设置表格复选框的变量，找到Table：

<Table
  rowKey={(record) => record.deviceCode}
  dataSource={tableData}
  rowSelection={{
    ...rowSelection,
  }}
  columns={columns}
  pagination={false}
/>

• 找到rowSelection，将selectedList赋值给selectedRowKeys：

const rowSelection = {
  selectedRowKeys: selectedList,
  ...onChange的代码
};

• 这样下次勾选几个复选框，关闭弹窗，下次再打开弹窗后就会重置表格的复选框了

上一篇：Antd5.x 国际化时间选择器问题

下一篇：Antd4.x 手机号输入框验证

弹窗内表格复选框重置

回复