如何单击一个元素并将其移动到另一个元素
如何单击一个元素并将其移动到另一个元素
提问于 2018-03-25 05:56:55
我正试着在React中建立一个只有象棋和骑士棋子的国际象棋游戏。我被卡住了，试图弄清楚如何检测某个部分何时被点击，以及如何将该部分从一个方块移动到我选择的方块。我需要使用event.target来完成这项任务吗？任何帮助都将不胜感激。
import React, { Component } from 'react';
import './App.css';
class Chessboard extends Component {
constructor(props) {
super(props);
this.state = {
knightSelected: false,
bishopSelected: false
}
this.knightMoveHandler = this.knightMoveHandler.bind(this);
}
knightMoveHandler(e) {
this.setState({
knightSelected: true
});
console.log(this.state.knightSelected);
}
bishopMoveHandler(e) {
this.setState({
bishopSelected: true
});
console.log(this.state.knightSelected);
}
render() {
return (
<div className="App">
<table>
<tbody className="chessboard">
<tr className="row">
<td className="square">1</td>
<td className="square">2</td>
<td className="square">3</td>
<td className="square">4</td>
<td className="square">5</td>
<td className="square">6</td>
<td className="square">7</td>
<td className="square">8</td>
</tr>
<tr className="row">
<td className="square">9</td>
<td className="square">10</td>
<td className="square">11</td>
<td className="square">12</td>
<td className="square">13</td>
<td className="square">14</td>
<td className="square">15</td>
<td className="square">16</td>
</tr>
<tr className="row">
<td className="square">17</td>
<td className="square">18</td>
<td className="square">19</td>
<td className="square">20</td>
<td className="square">21</td>
<td className="square">22</td>
<td className="square">23</td>
<td className="square">24</td>
</tr>
<tr className="row">
<td className="square">25</td>
<td className="square">26</td>
<td className="square">27</td>
<td className="square">28</td>
<td className="square">29</td>
<td className="square">30</td>
<td className="square">31</td>
<td className="square">32</td>
</tr>
<tr className="row">
<td className="square">33</td>
<td className="square">34</td>
<td className="square">35</td>
<td className="square">36
<span className="knight" value="1" onClick={this.knightMoveHandler}>♞</span>
</td>
<td className="square" >37
<span className="bishop" onClick={this.bishopMoveHandler}>♝</span>
</td>
<td className="square">38</td>
<td className="square">39</td>
<td className="square">40</td>
</tr>
<tr className="row">
<td className="square">41</td>
<td className="square">42</td>
<td className="square">43</td>
<td className="square">44</td>
<td className="square">45</td>
<td className="square">46</td>
<td className="square">47</td>
<td className="square">48</td>
</tr>
<tr className="row">
<td className="square">49</td>
<td className="square">50</td>
<td className="square">51</td>
<td className="square">52</td>
<td className="square">53</td>
<td className="square">54</td>
<td className="square">55</td>
<td className="square">56</td>
</tr>
<tr className="row">
<td className="square">57</td>
<td className="square">58</td>
<td className="square">59</td>
<td className="square">60</td>
<td className="square">61</td>
<td className="square">62</td>
<td className="square">63</td>
<td className="square">64</td>
</tr>
</tbody>
</table>
</div>
);
}
}
export default Chessboard;Stack Overflow用户
发布于 2018-03-25 06:40:06
在这方面，Event Delegation可能会对您有所帮助。
要选择一个毕晓普或骑士:对.chessboard应用onClick事件侦听器。然后检查单击的元素是否真的是预期的元素。
<tbody className="chessboard" onClick={this.clickHandler}>
this.clickHandler = e => {
if(e.target.parentElement.classList.contains('square')){
// do stuff here
}
}
要检查正方形是否为空或已填充，请执行以下操作：
this.state = {
isFilledWith: 'empty' or 'bishop' or 'knight'
}
现在，当你想要移动一个毕晓普/骑士时，你必须找出他们可以移动的可能的地方，也许可以用它做一个数组。当它实际移动时，调用一个函数来更改该正方形的isFilledWith状态。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/49470362
复制相关文章
相似问题
腾讯云开发者
