时间戳

首页 > 解决方案 > ReactJS当我使用任何handleClick时，其他handleClicks会触发

javascript - ReactJS当我使用任何handleClick时，其他handleClicks会触发

问题描述

我试图建立一个猜数字游戏。我写了一个按钮来猜测一个数字，一个按钮来生成一个随机数，以及一个按钮来比较猜测的数字和生成的数字。当我单击猜测数字按钮时，将触发 handleClickCompare 方法，并在其中获取 console.log。每次触发 handleChange 时，handleClickCompare 也会触发。有时但不是每次当我按下猜测按钮时都会生成一个新的随机数。到底是怎么回事？

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {
  constructor(props){
    super(props);
    this.state={ guess:0, gen:0 }
  }

  handleChange(guess, e) {
    this.setState({guess: e.target.value});
    console.log(this.state);
  }
  // handleChange(guess, event) {
  //   this.setState([guess]: event.target.value);
  //   console.log(this.state);
  // }
  handleClick(guess, e) {
    this.setState({ guess: e.target.value });
    console.log(this.state);
  }
  handleClickGen(gen,e){
    this.setState({gen: Math.floor(Math.random()*10)});
    console.log(this.state);
  }
  handleClickCompare(guess, gen) {
    if (gen<guess) {
    console.log("guess lower");
    }
    if (guess < gen) {
      console.log("guess higher");
    }else {
      console.log("You got it chief");
    }
  }
  


  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <p className="App-intro">
        Enter a number
        </p>
        <input
          value={this.state.guess}
          onChange={this.handleChange.bind(this, "guess")}
          type="number"
        />
        {/* <input name={guess} onChange={event => this.handleChange(event)} /> */}
        {/* <input type="text" name="guess" value={this.state.title}
                     onChange={this.handleChange.bind(this)}/> */}
        <button type="button"
          onClick={this.handleClick.bind(this, "guess")}>
          guess{" "}
        </button>

        <button type="button"
          onClick={this.handleClickGen.bind(this, "gen")}>
          gen a number{" "}
        </button>

        <button type="button"
          onClick={this.handleClickCompare(this.state.guess, this.state.gen)}>
          compare{" "}
        </button>



      </div>
    );
  }
}

export default App;

>

标签： javascriptreactjs

解决方案

您编写 onClick 处理程序的方式会在每次呈现组件时运行，而不仅仅是 onClick。

例如，您应该编写如下：

onClick={() => this.handleClick.bind(this, "guess")}>

根据您的正确评论进行了更新：最后一个处理程序中缺少绑定。

推荐阅读