onclick将内部文本添加到表td

问题描述

目前,我正在开发我的React Tic-Tac-Toe App,但遇到了我不理解的问题。

我的文件非常简单。我正在使用一种状态和一种在 useEffect 中的函数。应该根据当前状态值选择何时使用 X 符号或 O 符号来选择此功能。

一切正常(X和O都在点击上切换),直到我将此条件添加到 checkPlayer函数

if(e.target.innerText === ''){
  //add mark to the TD
}else{
  return;
}

这种情况是为了防止重写 td 的旧内部文本(例如,当第一个玩家点击该td时,添加了X标记。但是当第二个玩家单击相同的td时,它被重写了到O标记)。

但是现在,它不是在X和O之间切换,而只是编写X。控制台没有引发任何错误,我不知道为什么会这样。

很明显,我的目标是防止单击td,因为td里面已经有一些标记,因此不会被重写,不会更改状态,也不会切换播放器。

我的状态和具有功能的使用效果

  const [sign,setSign] = useState(true)

  useEffect(()=>{
    function checkPlayer(e){
      if(e.target.innerText === ''){
      //1st player
      if(sign === true ){
        e.target.innerText = 'X';

        setSign(false)
      }
        
      //2nd player
      if(sign === false){
        e.target.innerText = 'O'
  
        setSign(true)
      }
      }else{
        return;
      }
    }

    //Convert HTML collection to an array,then add eventListener to every item in array
    let all = document.getElementsByTagName('td');
    let tds = Array.from(all);

    tds.forEach(td => {
      td.addEventListener('click',checkPlayer)
    })
  },[sign])

应用程序的HTML部分

<div className="App">
  <div className="container">
    <table>
      <tbody>
        <tr>
          <td></td>
          <td></td>
          <td></td>
        </tr>

        <tr>
          <td></td>
          <td></td>
          <td></td>
        </tr>

        <tr>
          <td></td>
          <td></td>
          <td></td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

解决方法

暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!

如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@)

相关问答

Selenium Web驱动程序和Java。元素在(x,y)点处不可单击。其...
Python-如何使用点“。” 访问字典成员?
Java 字符串是不可变的。到底是什么意思?
Java中的“ final”关键字如何工作?(我仍然可以修改对象。...
“loop:”在Java代码中。这是什么,为什么要编译?
java.lang.ClassNotFoundException:sun.jdbc.odbc.JdbcOdbc...