防止点击元素

Question

嗨，我只是想知道React.js中是否有任何功能可以阻止用户单击应用程序的某些部分？

更清楚地说，我正在开发Tic tac toe应用程序，如果有人获胜，我想阻止对游戏领域的其他任何点击。

checkWinner功能检测到胜利后，胜利者会像这样显示在游戏字段上方

，从现在开始，我想让该用户只能单击“重播”图标或“返回”图标。没什么。

我尝试使用e.stopPropagation（）的checkWinner函数的一部分

  function checkWinner(e){
    //Horizontal check
    for(let i=0;i<values.length;i++){
      let xCount=0;
      let oCount=0;

      for(let j=0;j<values[i].length;j++){
        if(typeof values[i][j] === 'object' && values[i][j].props.children === 'x'){
          xCount++;
        }

        if(typeof values[i][j] === 'object' && values[i][j].props.children === 'o'){
          oCount++;
        }
      }

      if(xCount === 3){
        setWinner('X WINS!');
        displayWinner();
        e.stopPropagation();
      }
    }

每次单击字段后都会调用此函数，因此每次单击后都会检查是否有人获胜。但这会引发错误 TypeError：无法读取未定义的属性'stopPropagation'

你们知道这种情况下还有其他方法吗？谢谢。

Answer 1

要禁用点击，您可以使用CSS属性pointer-events: none;

禁用点击的示例

 function App() {
  const [counter, setCounter] = React.useState(0);
  const handleClick = () => {
    setCounter(counter + 1);
  }
  let disableClass = counter < 5 ? '' : 'disable';
  return (
    <div className="App">
      <h1>Disable button to click after 5</h1>
      <button 
      className={disableClass}
      onClick={handleClick}>Click</button>
      <h3>{counter}</h3>
    </div>
  );
}

css

.disable {
  pointer-events: none;
  border: none;
  padding: 8px 15px;
  background: red;
  color: white;
}

您可以按照此要求进行更改。 有关更多参考，请检查此pointer-events

Live working demo