Question

我正在尝试用React和骑士作品在React中建立一个国际象棋游戏。我一直试图弄清楚如何检测一件作品被点击的时间以及如何将这件作品从一个正方形移动到我选择的正方形。我需要使用event.target来完成此任务吗？任何帮助将不胜感激。

<nav class="navbar navbar-light" id="navbar" style="background-color:#282d32;">
    <div class="container-fluid">
        <a class="navbar-brand" href="#" id="logo" style="color:#ffffff;font-size:25px;font-weight:500;letter-spacing:0px;font-family:'Noto Sans', sans-serif;"><strong>#</strong></a>
        <button class="navbar-toggler" data-toggle="collapse" data-target="#navcol-1">
            <span class="sr-only">Toggle navigation</span>
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="" id="navcol-1" style="font-family:'Noto Sans', sans-serif;">
            <ul class="nav navbar-nav " id="nav" >
                <li class="item-106 nav-item"><a href="#" class="nav-link">Main</a></li>
                <li class="item-107 deeper parent nav-item" style="width:284px;"><a href="#" data-toggle="collapse" data-target="#dropdown"  class="navbar-toggler dropdown-toggle nav-link">Dropdown menu</a>
                    <ul class="nav navbar-nav collapse"id="dropdown">
                        <li class="item-108 nav-item"><a href="#" class="dropdown-item" style="color: red;">First</a></li>
                        <li class="item-115 nav-item"><a href="#" class="dropdown-item" style="color: red;">Second</a></li>
                        <li class="item-109 nav-item"><a href="#" class="dropdown-item" style="color: red;">Third</a></li>
                        <li class="item-110 nav-item"><a href="#" class="dropdown-item">Wywrotki</a></li>
                    </ul>
                </li>
                <li class="item-112 nav-item">
                <a href="#" class="nav-link">xxx</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

Answer 1

Event Delegation可能会对您有所帮助。

选择主教或骑士：将onClick事件侦听器应用于.chessboard。然后检查单击的元素是否实际上是预期的元素。

＆＃13;

<tbody className="chessboard" onClick={this.clickHandler}>

＆＃13;

this.clickHandler = e => {
  if(e.target.parentElement.classList.contains('square')){
    // do stuff here
  }
}

＆＃13;

检查方格是空的还是填充：

＆＃13;

this.state = {
  isFilledWith: 'empty' or 'bishop' or 'knight'
}

＆＃13;

现在当你想要移动一个主教/骑士时，你必须找出他们可以移动的可能位置，也许可以用它来制作阵列。当它实际移动时，调用一个改变该方格的isFilledWith状态的函数。

如何单击元素并将其移动到另一个元素

1 个答案: