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

Question

我正在尝试用主教和骑士的棋子在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}>&#9822;</span>
              </td>
              <td className="square" >37
                <span className="bishop" onClick={this.bishopMoveHandler}>&#9821;</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;

Answer 1

活动委派可能会在这里为您提供帮助。

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

 <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' } 

现在，当您要移动Bishop / Knight时，您必须找出它们可以移动的可能位置，或者从中找出一个阵列。 实际移动它时，调用一个函数以更改该正方形的isFilledWith状态。