react-data-table-component复选框无法保持选中状态问题求助

问题原因 #

自定义复选框组件没有正确接收并应用表格传递的checked状态属性，且事件处理方式不符合组件的受控逻辑，导致点击后状态无法同步到父组件，复选框无法维持选中状态。

解决方案 #

1. 修正自定义Checkbox组件 #

将组件简化，直接把所有传入的props（包括checked、onChange）完整传递给input元素，不需要单独提取onClick：

const Checkbox = React.forwardRef((props, ref) => {
  return (
    <div className="form-check pb-5">
      <input 
        type="checkbox"
        className="form-check-input"
        style={{ height: '20px', width: '20px' }}
        ref={ref}
        {...props}
      />
      <label className="form-check-label" id="booty-check" />
    </div>
  )
})

2. 确认选中状态处理函数正确更新状态 #

检查handleSelectedRows函数，确保它正确将选中行的状态保存到组件的state中，示例如下：

const [selectedRows, setSelectedRows] = useState([]);

const handleSelectedRows = ({ selectedRows: newSelectedRows }) => {
  setSelectedRows(newSelectedRows);
};

3. 确保数据源的稳定性 #

如果filteredItems是动态生成的，使用useMemo缓存结果，避免每次渲染都生成新数组导致表格行重新渲染，丢失选中状态：

const filteredItems = useMemo(() => {
  // 这里是你的过滤逻辑
  return originalItems.filter(item => /* 过滤条件 */);
}, [originalItems, /* 其他依赖项 */]);

验证 #

修改后点击复选框，表格会通过onChange事件同步选中状态到父组件，复选框的checked属性会由父组件状态控制，从而保持选中状态。

内容的提问来源于stack exchange，提问作者rom