在反应 js 中活跃 class

Question

抱歉提问。我有一个按钮，然后我在单击它时添加了一个活动的 class，但是当我单击它时所有按钮都变为活动状态，我该如何解决？这是代码

  <div className="">
          {category.items.length === 0 ? (
            <div>There is no property at this categories</div>
          ) : (
            category.items.map((item, index2) => {
              return (
                <div key={`category-${index1}-item-${index2}`}>
                  {buttons.map((buttonLabel, i) => (
                    <button
                      key={i}
                      name={buttonLabel}
                      onClick={(event) => handleClick(event, i)}
                      className={
                        i === clickedId
                          ? 'py-4 pl-3 customButton active '
                          : 'customButton py-4 pl-3'
                      }
                    >
                      {item.name}
                    </button>
                  ))}
                </div>
              );
            })
          )}
        </div>

这是调用按钮时的代码

<ButtonCategory
          data={category.categories}
          buttons={[category.categories]}
          doSomethingAfterClick={printButtonLabel}
        />

Answer 1

您应该在 handleClick 函数中将单击按钮的索引设置为 clickedId。所以你的 handleClick 函数必须是这样的

const handleClick = (event, i) => {
    setClickedId(i)
    // other logic
}

Answer 2

您为每个项目返回了同一组按钮。有更好的方法可以做到这一点，但对于您当前的设置，这应该有效：

  buttons.map((buttonLabel, i) => {
    const key = `${index2}.${i}`
    return (
    <button
      key={key}
      name={buttonLabel}
      onClick={(event) => handleClick(event, key)}
      className={
        key === clickedId
          ? "py-4 pl-3 customButton active "
          : "customButton py-4 pl-3"
      }
    >
      {item.name}
    </button>
  )});

只是不要忘记将您的 clickedId 状态初始化为 null 或 undefned 而不是 number

在反应 js 中活跃 class

active class in react js

javascript

components

reactjs