單擊按鈕時，如何添加選定的 class 並從 React 功能組件中的所有其他按鈕中刪除？

Question

我目前正在學習 React，並且我有一個菜單的功能組件。 單擊一個值時，我想添加“選擇選擇” class 以直觀地顯示它已被選中，並確保沒有其他按鈕具有 class。 有沒有一種方法可以在不為每個選擇創建單獨的 useState 掛鈎的情況下創建這種行為？

這是我的代碼：

function SortMenu(props){
    const [clickedDay, setClickedDay] = useState('');
    const [clickedMonth, setClickedMonth] = useState('');
    const [clickedYear, setClickedYear] = useState('');
    const choice = (value) =>{
        props.setSort(value);

        switch(value){
            case 'day':
                setClickedDay( (prevVal) => {
                    prevVal =='' ? setClickedDay('choice-selected'): setClickedDay('');
                    setClickedMonth('');
                    setClickedYear('');
                });
                break;
            case 'month':
                setClickedMonth( (prevVal) => {
                    prevVal =='' ? setClickedMonth('choice-selected'): setClickedMonth('');
                    setClickedDay('');
                    setClickedYear('');
                })
                break;
            case 'year':
                setClickedYear( (prevVal) => {
                    prevVal =='' ? setClickedYear('choice-selected'): setClickedYear('');
                    setClickedDay('');
                    setClickedMonth('');
                })
                break;

        }
    }
    return(
    <nav className="sortmenu">
        <div className={`${clickedDay} choice`} onClick={() => {choice("day");}}>Day</div>
        <div className={`${clickedMonth} choice`} onClick={() => {choice("month")}}>Month</div>
        <div className={`${clickedYear} choice`} onClick={() => {choice("year")}}>Year</div>
    </nav>
    )
}

目前我的代碼確實有效，但如果我需要添加更多選擇，我不僅要添加另一個案例，還要在現有案例中添加新選擇。 我想知道是否有更簡單或更好的方法來實現這種行為？

Answer 1

這是我在評論中描述的解決方案的一個工作示例。

 const { useState } = React; const SortMenu = () => { const [clickedChoice, setClickedChoice] = useState(''); const choice = (value) => { setClickedChoice(value); }; return ( <nav> <div className={`${clickedChoice === 'day'? 'choice-selected': ''} choice`} onClick={() => choice('day')} >Day</div> <div className={`${clickedChoice === 'month'? 'choice-selected': ''} choice`} onClick={() => choice('month')} >Month</div> <div className={`${clickedChoice === 'year'? 'choice-selected': ''} choice`} onClick={() => choice('year')} >Year</div> </nav> ) } ReactDOM.render(<SortMenu/>, document.querySelector('#root'));

 .choice { border: 1px solid black; padding: 2px; }.choice-selected { background-color: pink; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script> Click an option to select it. <div id="root"></div>