is-active 有条件地更改 onClick

Question

Bulma 的导航栏项目类可以采用“is-active”等属性，影响更改项目的突出显示。在 React 应用程序中，我想要一个单击事件来更改选择的项目。

一个更简单的问题是切换下拉列表的显示。

import React, { useState } from 'react';

const Dropdown = () => {
    const [active, setActive] = useState('');

    const toggleActive = (event) => {
        event.preventDefault();
        if (active=='is-active'){
            setActive('');
        } else {
            setActive('is-active');
        }
    };
    
    return (
    <div class={`dropdown ${active}`}>
        <div class="dropdown-trigger">
            <button class="button" 
                    aria-haspopup="true"
                     aria-controls="dropdown-menu"
                     onClick={toggleActive}>
                <span>Dropdown button</span>
                <span class="icon is-small">
                    <i class="fas fa-angle-down" aria-hidden="true"></i>
                </span>
            </button>
        </div>
        <div class="dropdown-menu" id="dropdown-menu" role="menu">
            <div class="dropdown-content">
                <a href="#" class="dropdown-item"> Dropdown item </a>
                <a class="dropdown-item"> Other dropdown item </a>
                <a href="#" class="dropdown-item is-active"> Active dropdown item </a> // should be dynamic! 
                <a href="#" class="dropdown-item"> Other dropdown item </a>
                <hr class="dropdown-divider" />
                <a href="#" class="dropdown-item"> With a divider </a>
            </div>
        </div>
    </div>
    )    
}

export default Dropdown;

有没有一种方法可以在不为每个菜单项创建一个 useState 的情况下执行此操作？

我想知道实现这一目标的最佳方法是什么 - 也许可以使用一个对象（而不是字符串）作为 useState 的输出，每个菜单项都有一个元素。当切换给定菜单项时，当前菜单项将被停用，新菜单项将被激活。

Answer 1

您可以使用带有项目信息的数组。 映射它，你就有了一个索引，它可以用来与当前选定的项目索引进行比较。

使用下拉组件的父组件中的逻辑是相同的。

它使所有内容可读、可重复使用且易于维护。

import React, { useState } from 'react';

const Parent = () => {
    const [ selectedMenu, setSelectedMenu ] = useState(undefined)

    const menuItems = [
      {text: "item 1"},
      {text: "item 2"},
      {text: "item 3"}
         ]

    return (
    <>
        {
        menuItems.map((item, index) => {
            return <Dropdown isActive={selectedMenu === index} onClick={() => setSelectedMenu(index)}/>
        })
      }
    </>
  )
}

const Dropdown = (props) => {
    const [ selectedItem, setSelectedMenu ] = useState(undefined)
        
    const dropdownContent = [
      {text: "Dropdown item"},
      {text: "Other dropdown item"},
      {text: "Another one"}
    ]
  
    return (
    <div class={`dropdown ${props.isActive ? "is-active" : ""}`}>
        <div class="dropdown-trigger">
            <button class="button"
                    aria-haspopup="true"
                     aria-controls="dropdown-menu"
                     onClick={onClick}>
                <span>Dropdown button</span>
                <span class="icon is-small">
                    <i class="fas fa-angle-down" aria-hidden="true"></i>
                </span>
            </button>
        </div>
        <div class="dropdown-menu" id="dropdown-menu" role="menu">
            <div class="dropdown-content">
                {
                dropdownContent.map((item, index) => {
                    return <a href="#" class={`dropdown-item ${selectedItem === index ? "is-active" : ""}`}>{item.text}</a>
                    })
                }
            </div>
        </div>
    </div>
    )    
}

export default Dropdown;