时间戳

首页 > 解决方案 > ReactJS - 禁用特定按钮

reactjs - ReactJS - 禁用特定按钮

问题描述

我有一个循环（地图），它构造了许多具有不同 ID 的按钮。

我正在尝试通过单击自己来根据您的 id 禁用按钮，但它不起作用。我有以下代码：

function handleFlipCard() {
  const cardPosition = cardCompare[0].cardPosition 

  document.getElementById(`b${cardPosition}`).style.cursor = "default" // it does works
  document.getElementById(`b${cardPosition}`).border.style = "3px solid white" //it does works

  document.getElementById(`b${cardPosition}`).disabled = true //WHY IT DOESN'T WORKS?
}

{cardsScreen.map((cardScreen, index) => (
  <button className="btCard" onClick={handleFlipCard} disabled={buttonDisable} id={`b${index}`}>
))}

任何想法？

标签： reactjsbuttonreact-hooks

解决方案

首先，使用 JavaScript Vanilla 控制组件行为是一种非常糟糕的做法。

在这种情况下，最好的方法是创建一个状态来存储禁用的 ID 并根据点击填充状态。

import React, { useState } from 'react';

function Button() {
    const [disabledButtons, setDisabledButtons] = useState([]);

    const handleFlipCard = (id) => {
        // do wherever you want
        setDisabledButtons(prevState => [...prevState, id]);
    }

    {cardsScreen.map((cardScreen, index) => {
        const id = `b${index}`;
        return (
            <button 
                className="btCard" 
                onClick={handleFlipCard(id)} 
                disabled={disabledButtons.includes(id)} 
                id={id}
              >
                Content
            </button>
        )
    })}
}

推荐阅读