问题描述
目前,我正在开发我的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 (将#修改为@)