React JS打印用户的选择

如何解决React JS打印用户的选择

我正在尝试React.js，我按照一个教程制作了换装游戏。现在，我正在尝试选择用户的位置，单击该位置，然后打印列和行。到目前为止，这是我所做的：

<ul class="main">
  <li class="item">Task 1</li>

  <li class="item">Task 2
    <ul class="sub-menu">
      <li class="item">Sub Task 1</li>

      <li class="item">Sub Task 2
        <ul class="sub-menu">
          <li class="item">Sub Task 1</li>
          <li class="item">Sub Task 2</li>
        </ul>
      </li>

      <li class="item">Sub Task 3
        <ul class="sub-menu">
          <li class="item">Sub Task 1</li>
          <li class="item">Sub Task 2
            <ul class="sub-menu">
              <li class="item">Sub Task 1</li>
              <li class="item">Sub Task 2</li>
            </ul>
          </li>
          <li class="item">Sub Task 3</li>
          <li class="item">Sub Task 4</li>
        </ul>
      </li>
    </ul>
  </li>

  <li class="item">Task 3</li>
</ul>

我定义了一个const选择，我要在其中放置用户的选择。然后，我调用了calculateChoice，但是当我尝试{choice}时什么也没有显示。我不知道为什么另外，我不知道如何获得用户单击的行和列。我对不同的选项进行了制表，但是我不知道如何将它们与用户单击的Square进行比较。 谢谢

编辑： 因此，我更改了const选择：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

function Square(props) {
    return (
        <button
            className="square"
            onClick={props.onClick}
        >
            {props.value}
        </button>
    );
}

class Board extends React.Component {
    renderSquare(i) {
        return <Square
            value={this.props.squares[i]}
            onClick={ () => this.props.onClick(i)}
        />;
    }

    render() {
          return (
            <div>
                <div className="board-row">
                    {this.renderSquare(0)}
                    {this.renderSquare(1)}
                    {this.renderSquare(2)}
                </div>
                <div className="board-row">
                    {this.renderSquare(3)}
                    {this.renderSquare(4)}
                    {this.renderSquare(5)}
                </div>
                <div className="board-row">
                    {this.renderSquare(6)}
                    {this.renderSquare(7)}
                    {this.renderSquare(8)}
                </div>
            </div>
        );
    }
}

class Game extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            history: [{
                squares: Array(9).fill(null),choice: null,}],stepNumber: 0,xIsNext: true,};
    }

    jumpTo(step){
        this.setState({
            stepNumber: step,xIsNext: (step % 2) === 0,});
    }


    handleClick(i) {
        const history = this.state.history.slice(0,this.state.stepNumber + 1);
        const current = history[history.length - 1];
        const squares = current.squares.slice();

        //Si quelqu'un a gagné,on empêche le clic
        if (calculateWinner(squares) || squares[i]){
            return;
        }
        squares[i] = this.state.xIsNext ? 'X' : 'O';
        this.setState({
            history: history.concat([{
                squares: squares,}]),stepNumber: history.length,xIsNext: !this.state.xIsNext,});
    }

    render() {
        const history = this.state.history;
        const current = history[this.state.stepNumber];
        const winner = calculateWinner(current.squares);

        const choice = (current) => { this.calculateChoice(current.squares) };

        const moves = history.map((step,move) => {
            const desc = move ?
                'Revenir au tour n°' + move :
                'Revenir au début de la partie';
            return (
                <li key={move}>
                    <button onClick={() => this.jumpTo(move)}>{desc}</button>
                </li>
            );
        });

        let status;
        if (winner){
            status = winner + ' a gagné';
        } else {
            status = 'Prochain joueur : ' + (this.state.xIsNext ? 'X' : 'O');
        }

        return (
            <div className="game">
                <div className="game-board">
                    <Board
                        squares={current.squares}
                        onClick={ (i) => {
                            this.handleClick(i);
                        } }
                    />
                </div>
                <div className="game-info">
                    <div>Coup {choice}</div>
                    <div>{ status }</div>
                    <ol>{ moves }</ol>
                </div>
            </div>
        );
    }
}

function calculateWinner(squares) {
    const lines = [
        [0,1,2],[3,4,5],[6,7,8],[0,3,6],[1,7],[2,5,];
    for (let i = 0; i < lines.length; i++){
        const [a,b,c] = lines[i];
        if(squares[a] && squares[a] === squares[b] && squares[a] === squares[c]){
            return squares[a];
        }
    }
    return null;
}

function calculateChoice(squares){
    const lines = [
        [0,0],1],b] = lines[i];
        return "test ".squares[a];
    }
    return "test";
}

// ========================================

ReactDOM.render(
    <Game />,document.getElementById('root')
);

现在它可以工作了，我得到了显示。但是我不知道如何获得用户单击位置的列和行。我从calculateChoice开始，但是我不知道该怎么做。 我想要的是： 用户单击一个正方形。 'X'或'O'会影响到Square，然后显示与用户单击的位置（行，列）相对应的“选择”。感谢您对如何开发该功能的任何解释！

解决方法

这是一个函数const choice = (current) => { this.calculateChoice(current.squares) };

1. 如果您渲染<div>Coup {choice}</div>，则它不会渲染任何值，因为它是一个函数。
2. 此函数不会返回正确的值，因为它并不意味着返回任何内容。您可以执行const choice = (current) => { return this.calculateChoice(current.squares) };或const choice = (current) => this.calculateChoice(current.squares);
3. 如果要调用this.calculateChoice(current.squares)，请确保它在类组件中。