ReactJs，如何將 class 名稱添加到相同 div 的 Map

Question

這是我的代碼，我試圖在單擊時將 class 添加到單擊的 div，但我有超過 1 個 div 具有相同的類名，因此當我單擊任何 div 時，切換開關 class 添加到所有 div，而不是我單擊的那個 div我想知道如何指定要向其添加切換 class 的 div

代碼：

    const [isActive, setActive] = useState(false);
    const toggleClass = () => {
        setActive(!isActive)
        console.log('sad')
    }


    return (
        <div className="command_wrapper">
            <div className="command_list">
                {
                    Commands.map((item, index) => {
                        return (
                            <div className="command" >
                                <div className="command_face" onClick={toggleClass}>
                                    <h1>{item.Command}</h1>
                                    <p>{item.Description}</p>
                                </div>
                                <div className={isActive ? "command_body" : "disapper"}>
                                    <div className="command_usage">
                                        <h1>Usage</h1>
                                        <p>{item.Usage}</p>
                                    </div>
                                    <div className="command_required">
                                        <h1>Required Permissions</h1>
                                        <p>{item.premissions}</p>
                                    </div>
                                </div>
                            </div>
                        )
                    })

                }
            </div>
        </div>
    ```

Answer 1

您可以在 toggle function 中傳遞該項目，並驗證傳遞的項目是否已激活或僅保存單擊的項目。

const [itemActive, setItemActive] = useState();
const toggleClass = (item) => {
    setItemActive(item)
}


return (
    <div className="command_wrapper">
        <div className="command_list">
            {
                Commands.map((item, index) => {
                    return (
                        <div className="command" >
                            <div className="command_face" onClick={() => toggleClass(item)}>
                                <h1>{item.Command}</h1>
                                <p>{item.Description}</p>
                            </div>
                            <div className={item === itemActive ? "command_body" : "disapper"}>
                                <div className="command_usage">
                                    <h1>Usage</h1>
                                    <p>{item.Usage}</p>
                                </div>
                                <div className="command_required">
                                    <h1>Required Permissions</h1>
                                    <p>{item.premissions}</p>
                                </div>
                            </div>
                        </div>
                    )
                })

            }
        </div>
    </div>
```

如果項目有任何獨特的屬性，您可以立即保存，例如 ID 或名稱。 我認為它會更好。

Answer 2

/*const [isActive, setActive] = useState(false);
const toggleClass = () => {
    setActive(!isActive)
    console.log('sad')
}*/
function handleClick(el){
  //toggle the class which indicates selection ex. 'active'
    el.classList.toggle('active');
 //other stuff todo

}
return (
    <div className="command_wrapper">
        <div className="command_list">
            {
                Commands.map((item, index) => {
                    return (
                        <div className="command" >
                            //destruct event objet{event.target}
                            <div onClick={({target})=>handleClick(target)}>
                                <h1>{item.Command}</h1>
                                <p>{item.Description}</p>
                            </div>
                         ....
                         ...
                        </div>
                    )
                })

            }
        </div>
    </div>