更改映射陣列內單擊目標的狀態

我正在嘗試更改地圖陣列內的狀態。我的狀態在地圖陣列創建的所有專案中共享，我正在嘗試更改單擊專案的狀態，這是代碼：

{dbData ?
            dbData.map((item, i) => (
                <Box id={item.id} className={`${cl.FolderStyles} ${activeFolderStyles}`} key={i} onClick={activeFolder}>
                    <FolderIcon className={cl.folder_icon} />
                    {item.name}
                </Box>
            ))
            : <img src={loader} alt="loader" />
        }

在這里你可以看到我創建了多個專案，狀態是：“activeFolderStyles”，我想要的是向點擊的專案添加一個類，該專案變為活動狀態，但我的問題是所有專案的狀態在點擊和所有變得活躍。

            const [activeFolderStyles, setActiveFolderStyles] = useState();
          const activeFolder = (e) => {
            const id = e.target.id;
            const element = document.getElementById(id);
            console.log(element);
            if (element.classList.contains(side_cl.folderActive)) {
              setActiveFolderStyles("");
            }
            else {
              setActiveFolderStyles(side_cl.folderActive);
            }
          }

這是我使用的狀態。

 const [activeFolderStyles, setActiveFolderStyles] = useState();
  const activeFolder = (e) => {
    const id = e.target.id;
    const element = document.getElementById(id);
    if (element.classList.contains(side_cl.folderActive)) {
      setActiveFolderStyles("");
    }
    else {
      setActiveFolderStyles(side_cl.folderActive);
    }

}

所以我真的不知道如何指出目標狀態而不是全部

uj5u.com熱心網友回復：

您可以維護一些定義當前活動檔案夾是什么的狀態。狀態將使用它來標識當前活動的檔案夾id，這可以在您映射時獲得dbData。映射時，可以檢查當前當前item.id的當前item是否等于id您狀態中的活動，如果是，則添加您的類，否則，根本不添加該類（注意，activeFolder下面的 JSX 指的是新的我們正在創建的狀態值是為了跟蹤活動檔案夾 ID，而不是您問題中的點擊事件處理函式）：

{dbData ?
  dbData.map((item, i) => (
    <Box id={item.id} className={`${cl.FolderStyles} ${item.id === activeFolder ? side_cl.folderActive : ""}`} key={item.id} onClick={() => handleFolderClick(item.id)}>
      <FolderIcon className={cl.folder_icon} />
      {item.name}
    </Box>
   ))
   : <img src={loader} alt="loader" />
}

然后你可以創建你的activeFolder狀態：

const [activeFolder, setActiveFolder] = useState();

然后，當您單擊檔案夾到當前檔案夾時，您可以更新此狀態：

// Use this instead of your `activeFolder` function
const handleFolderClick = (newItemId) => {
  // If the folder we're activating is already "active", deactivate it, otherwise, update the state to point to activate our new folder
  setActiveFolder(currItemId => currItemId === newItemId ? "" : newItemId);
}

上面的 JSXhandleFolderClick通過傳遞被點擊的框的 item id 來使用上面的函式。

旁注：像getElementById(),querySelectorAll()等DOM 方法很少在 React 中使用，如果您發現自己使用它們，那么很有可能您沒有按照預期的方式做某事，組件的狀態應該用于幫助驅動組件邏輯及其呈現的內容。

uj5u.com熱心網友回復：

您可以像這樣以更清潔的方式執行此操作

<Box id={item.id} className={item.id === activeFolderStyles ? "ACTIVE CLASSNAME" : "NOT ACTIVE CLASSNAME"} key=. 
   {i} onClick={setActiveFolderStyles(item.id)}>
   <FolderIcon className={cl.folder_icon} />
   {item.name}
</Box>

標籤：javascript 反应 反应钩子

上一篇：如何更改<Select/>的選定<Option/>的css？

下一篇：自動功能不會每次都復制粘貼