復選框 treeview 未在反應中選中

Question

我按照下面的示例創建了一個 treeview 復選框。

例子

它使用擴展組件。 但是我的代碼需要使用 class。所以我已經創建並且數據加載也沒有問題。 但是當我試圖檢查它不工作時。

const stateLod = {
    checked: [],
    expanded: [],
    data : [],  
    setDataLoad:null
}

復選框樹代碼

       <CheckboxTree    
                    nodes={listItems}
                    iconsClass="fa5"
                    checked={stateLod.checked}
                    data={classData}
                    onCheck={(checked) => 
                     stateLod.checked={checked}
                      } 
       /> 

任何人都有解決這個問題的想法

我也試過這種方式。

function setCheckedNodes(checked){ 
    return true;
}

 <CheckboxTree    
  nodes={listItems}
  iconsClass="fa5"
  checked={stateLod.checked}
  data={classData}
  onCheck={(checked) => setCheckedNodes(checked)}
  } 
 /> 

Answer 1

為了在切換后重新渲染樹，您需要使用 state。示例代碼在 class 中使用 state，而您似乎在使用鈎子，只是您也忘記將選中的項目設置為 state：

import { useState } from "react";

function MyComponent() {
    const [checked, setChecked] = useState([]);

    return (
        <CheckboxTree
            nodes={listItems}
            iconsClass="fa5"
            checked={checked}
            data={classData}
            onCheck={setChecked}
        /> 
    );
}