为什么在Reactjs中下次单击时会显示输出

时间:2017-02-01 06:42:32

标签: javascript reactjs

我是ReactJS的新手,这就是我的代码可能没有错误的原因,但我现在不想要这样做。我正在创建一个tic-tac-toe,一切正常,除了那个winner正在更新下一个onMouseUp事件。我到处搜索,但我找不到错误。

这是代码。

var Mycheck = React.createClass({
      getInitialState: function() {
        return {
          disppp: "block",
          disppp2: "none",
          cnt: 0,
          active: 1,
          turnNum: 0
        }
      },
      handleClick: function(event, key) {
        this.setState({
          cnt: this.state.cnt + 1
        })
        var divId = parseInt(event.target.id);
        var valvar = [];
        if (this.state.active) {
          if (this.state.cnt < 9) {
            this.setState({
              turnNum: this.state.turnNum + 1
            })
            if (this.state.cnt % 2 == 0) {
              valvar[key] = "X";
              this.setState(valvar)
              this.setState({
                disppp: "none",
                disppp2: "block"
              })
            } else {
              valvar[key] = "O";
              this.setState(valvar)
              this.setState({
                disppp: "block",
                disppp2: "none"
              })
            }
          } else {
            alert("GAME DRAW");

          }
        }
        this.Findvalue();

      },
      Findvalue: function() {
        var arr = [];
        var winner;
        var resultant = {
          r1: [1, 2, 3],
          r2: [4, 5, 6],
          r3: [7, 8, 9],
          r4: [1, 4, 7],
          r5: [2, 5, 8],
          r6: [3, 6, 9],
          r7: [1, 5, 9],
          r8: [3, 5, 7]
        };

        for (var i = 1; i < 10; i++) {
          arr[i] = document.getElementById(i).innerHTML;
        }
        if (arr[resultant.r1[0]] == arr[resultant.r1[1]] && arr[resultant.r1[0]] == arr[resultant.r1[2]] && arr[resultant.r1[0]] != "" && arr[resultant.r1[1]] != "" && arr[resultant.r1[2]] != "") {
          winner = arr[resultant.r1[0]];
        }
        if (arr[resultant.r2[0]] == arr[resultant.r2[1]] && arr[resultant.r2[0]] == arr[resultant.r2[2]] && arr[resultant.r2[0]] != "" && arr[resultant.r2[1]] != "" && arr[resultant.r2[2]] != "") {
          winner = arr[resultant.r2[0]];
        }
        if (arr[resultant.r3[0]] == arr[resultant.r3[1]] && arr[resultant.r3[0]] == arr[resultant.r3[2]] && arr[resultant.r3[0]] != "" && arr[resultant.r3[1]] != "" && arr[resultant.r3[2]] != "") {
          winner = arr[resultant.r3[0]];
        }
        if (arr[resultant.r4[0]] == arr[resultant.r4[1]] && arr[resultant.r4[0]] == arr[resultant.r4[2]] && arr[resultant.r4[0]] != "" && arr[resultant.r4[1]] != "" && arr[resultant.r4[2]] != "") {
          winner = arr[resultant.r4[0]];
        }
        if (arr[resultant.r5[0]] == arr[resultant.r5[1]] && arr[resultant.r5[0]] == arr[resultant.r5[2]] && arr[resultant.r5[0]] != "" && arr[resultant.r5[1]] != "" && arr[resultant.r5[2]] != "") {
          winner = arr[resultant.r5[0]];
        }
        if (arr[resultant.r6[0]] == arr[resultant.r6[1]] && arr[resultant.r6[0]] == arr[resultant.r6[2]] && arr[resultant.r6[0]] != "" && arr[resultant.r6[1]] != "" && arr[resultant.r6[2]] != "") {
          winner = arr[resultant.r6[0]];
        }
        if (arr[resultant.r7[0]] == arr[resultant.r7[1]] && arr[resultant.r7[0]] == arr[resultant.r7[2]] && arr[resultant.r7[0]] != "" && arr[resultant.r7[1]] != "" && arr[resultant.r7[2]] != "") {
          winner = arr[resultant.r7[0]];
        }
        if (arr[resultant.r8[0]] == arr[resultant.r8[1]] && arr[resultant.r8[0]] == arr[resultant.r8[2]] && arr[resultant.r8[0]] != "" && arr[resultant.r8[1]] != "" && arr[resultant.r8[2]] != "") {
          winner = arr[resultant.r8[0]];
        }

        if (winner == "X") {
          this.setState({
            active: 0
          })
          alert("WINNER IS PLAYER 1");
        }
        if (winner == "O") {
          this.setState({
            active: 0
          })
          alert("WINNER IS PLAYER 2");
        }
      },
      render: function() {
          var divVal = "";
          var i = 0;

          return ( < div >
            < div className = "turn_num" > TURN NUMBER: {
              this.state.turnNum + 1
            } < /div>

            <button style={{display:this.state.disppp}}>PLAYER 1 FOR X</button >
            < button style = {
              {
                display: this.state.disppp2
              }
            } > PLAYER 2 FOR O < /button><br/ > < br / >
            < button className = "square"
            id = "1"
            onMouseUp = {
              e => this.handleClick(e, "valvar1")
            }
            disabled = {
              this.state.valvar1
            } > {
              this.state.valvar1
            } < /button>
             <button className="square" id="2" onMouseUp={e => this.handleClick(e,"valvar2")} disabled={this.state.valvar2}>{this.state.valvar2}</button >
            < button className = "square"
            id = "3"
            onMouseUp = {
              e => this.handleClick(e, "valvar3")
            }
            disabled = {
              this.state.valvar3
            } > {
              this.state.valvar3
            } < /button>
            <button className="square clearB" id="4" onMouseUp={e => this.handleClick(e,"valvar4")} disabled={this.state.valvar4}>{this.state.valvar4}</button >
            < button className = "square"
            id = "5"
            onMouseUp = {
              e => this.handleClick(e, "valvar5")
            }
            disabled = {
              this.state.valvar5
            } > {
              this.state.valvar5
            } < /button>
             <button className="square"id="6" onMouseUp={e => this.handleClick(e,"valvar6")} disabled={this.state.valvar6}>{this.state.valvar6}</button >
            < button className = "square clearB"
            id = "7"
            onMouseUp = {
              e => this.handleClick(e, "valvar7")
            }
            disabled = {
              this.state.valvar7
            } > {
              this.state.valvar7
            } < /button>
             <button className="square" id="8" onMouseUp={e => this.handleClick(e,"valvar8")} disabled={this.state.valvar8}>{this.state.valvar8}</button >
            < button className = "square"
            id = "9"
            onMouseUp = {
              e => this.handleClick(e, "valvar9")
            }
            disabled = {
              this.state.valvar9
            } > {
              this.state.valvar9
            } < /button><br/ > < br / > < br / >
            < /div>

            );

    }
});


ReactDOM.render(<Mycheck></Mycheck > , document.getElementById("container"));
.square {
  height: 50px;
  width: 50px;
  border: 1px solid black;
  background: none;
  float: left;
  padding: 10px;
  text-align: center;
  font-size: 25px;
  font-weight: bold;
  color: #146fbe;
}
.clearB {
  clear: both;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="container"></div>

0 个答案:

没有答案