按钮被禁用，但div内部仍在调用函数

Question

我试图禁用按钮后，它被点击。我不想使用pointer-events:none;因为这可以从前端检查中禁用。它需要在不可能被Inspect操纵的情况下被禁用。我怎样才能做到这一点呢?设置disabled属性仍然允许操作，因为他们也可以从inspect中删除该属性。整个div必须是不可点击的

<button key={tile} className={`${styles.tile} ${styles.button}`} onClick={goldClicked}>
<div className={`${styles.cover}`}>
<img src={require("../../../assets/img/goldbar.png")} id={`button-${tile}`} className={`${styles.bomb} ${styles.displayOff}`} alt={`button-${tile}`}></img>
</div>
</button>

const goldClicked = (event) => {
event.target.classList.add(`${styles.disableClick}`) // Currently disableClick is using pointer-events:none;
event.target.setAttribute('disabled','') // disabling it by using attribute.

}

我尝试使用pointer -events:none和setAttribute('disabled'， ")。它们都是不可行的，因为它们可以从Inspect中移除。它必须是不可点击的，不能被Inspect操作。

Answer 1

与其试图完全禁用按钮，甚至对于那些可以使用inspect操作DOM的用户，为什么不跟踪按钮已经被点击的时间，这样你就可以控制点击它是否有效果。

你可以存储一些状态来跟踪按钮是否已经被点击:

const [wasClicked, setWasClicked] = useState(false);

你可以使用状态来选择按钮是否应该被禁用。

<button key={tile} className={`${styles.tile} ${styles.button}`} onClick={goldClicked} disabled={wasClicked}>
<div className={`${styles.cover}`}>
<img src={require("../../../assets/img/goldbar.png")} id={`button-${tile}`} className={`${styles.bomb} ${styles.displayOff}`} alt={`button-${tile}`} />
</div>
</button>

在你的onClick处理程序中，如果状态为true，你可以什么都不做，或者做其他事情。

const goldClicked = (event) => {
if (wasClicked) {
// the button has already been clicked, so do something here or do nothing
} else {
event.target.classList.add(`${styles.disableClick}`) // Currently disableClick is using pointer-events:none;
event.target.setAttribute('disabled','') // disabling it by using attribute.
}
}