时间戳

首页 > 解决方案 > 反应 onClick 不触发（ES6）

javascript - 反应 onClick 不触发（ES6）

问题描述

我是 React 的新手，我查看了 StackOverflow 和在线，但我找不到为什么 onClick 在这种情况下不起作用。当我单击按钮时，绝对没有任何反应。其他一切都加载。我尝试将handleClick 放在Button 和Buttons 中，但没有。我在 App 中尝试过构造函数/超级，什么都没有。我已经尝试在 onClick 本身中定义 handleClick 函数，什么都没有。

应用程序

class App extends Component {

state = {
  randomNumber: RandomNumber,
  currentValue: 0,
  gameScore: 0,
  totalScore: 0,
};

handleClick = event => {
  event.preventDefault();
  console.log('meow');
}

render() {
  return (

  <div className="App">

  <div className="randomNumber">
    <RandomNumber />
  </div>

  <div className="buttonGrid">
    <Buttons onClick={this.handleClick} />
  </div>

  <div className="currentValue">
    Current value = {this.state.currentValue}
  </div>

  </div>
  );
  }
}

纽扣

class Buttons extends Component {

  generateNumber = (min, max) => {
      const rndNumBtn = Math.floor(Math.random()*(max-min+1)+min);
      console.log(rndNumBtn);
      return rndNumBtn
    };

    state = {
        buttons: [
            {
              id: "black",
              src: black,
              alt: "blackBtn",
              value: this.generateNumber(1, 12)
            },
            {
              id: "brown",
              src: brown,
              alt: "brownBtn",
              value: this.generateNumber(1, 12)
            },
            {
              id: "gray",
              src: gray,
              alt: "grayBtn",
              value: this.generateNumber(1, 12)
            },
            {
              id: "yellow",
              src: yellow,
              alt: "yellowBtn",
              value: this.generateNumber(1, 12)
            }
          ]
        };

    render() {
      return (
          <div>

            {this.state.buttons.map(button => {
                return (
                    <Button
                      className={button.id}
                      key={button.id}
                      src={button.src}
                      alt={button.alt}
                      value={button.value}
                    />
                )
            })}

        </div>
      )
    }
  }

按钮

const Button = (props) => {

    return (

      <button className="zoom">
        <img
          src={props.src}
          alt={props.alt}
          value={props.value}
        />
      </button>
    )
  }

标签： javascriptreactjsecmascript-6onclick

解决方案

您需要onClick在<button>. handleClick在中定义App并且应该一直向下传递到<button>：

...
<Buttons onClick={this.handleClick} />
...
<Button onClick={this.props.onClick} ... />
...
<button className="zoom" onClick={props.onClick}>

推荐阅读