如何在狀態中將一個值設置為“ on”，將其他所有值設置為“ off”？

Question

我試圖設置我的應用程序的狀態，其中狀態對象中有3個鍵值對。 我只想將一個設置為“開”，將其余設置為“關”。

onMenuClick = (leafName) => {

        this.setState(Object.assign({}, {
            news: "off",
            tournament: "off",
            register: "off",
        }, { leafName: "on" }))

    }

import React from 'react'
import './Leaf.css'
import { Link } from 'react-router-dom'




const Leaf = ({ leafName, state, onMenuClick }) => {

    return (

        <div onClick={() => onMenuClick(leafName)} className={`leaf ${state}`}>
            <Link className="a" to={leafName}>{ leafName.toUpperCase() }</Link>
        </div>



    )

}


export default Leaf

import React from 'react'
import './Menu.css'
import Leaf from '../Leaf/Leaf'



class Menu extends React.Component {

    constructor() {
        super()

        this.state = {
            news: "off",
            tournament: "off",
            register: "off",
        }
    }

    onMenuClick = (leafName) => {

        this.setState(Object.assign({}, {
            news: "off",
            tournament: "off",
            register: "off",
        }, { leafName: "on" }))

    }

    render() {

        return (
            <div className="menu">
                <Leaf onMenuClick={this.onMenuClick} leafName="news" state={this.state.news} />
                <Leaf onMenuClick={this.onMenuClick} leafName="tournament" state={this.state.tournament} />
                <Leaf onMenuClick={this.onMenuClick} leafName="register" state={this.state.register} />
            </div>
        )

    }

}
export default Menu

應該是菜單導航。 如果我單擊其中之一，則應激活我單擊的那一項，而其余應禁用。 而且它不起作用。

Answer 1

不要按情況存儲狀態。 它比您需要管理的要多。

存儲已打開的那個，然后在需要時將當前的葉子名稱與其進行比較。 例如

onMenuClick = (leafName) => {
    this.setState(Object.assign({}, {
        on: leafName,
    }));
};

const Leaf = ({ leafName, state, onMenuClick }) => {
    return (
        <div onClick={() => onMenuClick(leafName)} className={`leaf ${leafName === state.on ? "on" : "off"}`}>
            <Link className="a" to={leafName}>{ leafName.toUpperCase() }</Link>
        </div>
    )
}

Answer 2

將leafName放在setState的方括號中：

{ [leafName]: “on” }