React onClick не стреляет (ES6)

Question

Я новичок в React и посмотрел StackOverflow и онлайн, но не могу понять, почему onClick не работает в этом случае.Абсолютно ничего не происходит, когда я нажимаю кнопку.Все остальное загружается.Я попытался положить handleClick в кнопку и кнопки, но ничего.Я попробовал конструктор / супер в приложении, ничего.Я попытался определить функцию handleClick в самом onClick, ничего.

Приложение

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

Answer 1

Основная проблема заключается в том, что Buttons - это группирующий компонент, который не отображает какие-либо собственные элементы DOM (ввод, кнопка и т. Д.), К которым могут быть прикреплены обработчики событий.Если вы хотите, чтобы ваш обработчик событий был в App, то вам нужно передать ссылку на него вниз по дереву компонентов на компонент, на который будет щелкнуть мышью - в этом случае: Button.

ВотПример на основе вашего кода, чтобы показать вам, как это работает.

class App extends React.Component {

  constructor () {
    super();
    this.handleClick = this.handleClick.bind(this);
  };

  handleClick(event){
    console.log(event.target.textContent);
  }

  render() {
    const { buttons } = this.props;
    return (
      <div className="App">
        <Buttons handleClick={this.handleClick} buttons={buttons} />
      </div>
    )
  }

}

function Buttons({ buttons, handleClick }) {
  return (
    <div>
    {buttons.map(button => {
      return (
        <Button
          key={button.id}
          handleClick={handleClick}
          value={button.value}
        />
      )
    })}
    </div>
  )
}

const Button = ({ value, handleClick }) => {
  return (
    <button
      className="zoom"
      onClick={handleClick}
    >{value}
    </button>
  )
}

const buttons = [{"id":"black","alt":"blackBtn","value":"1"},{"id":"brown","alt":"brownBtn","value":"2"},{"id":"gray","alt":"grayBtn","value":"3"},{"id":"yellow","alt":"yellowBtn","value":"4"}];
  
ReactDOM.render(
  <App buttons={buttons} />,
  document.getElementById('root')
);

<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="root">

Answer 2

Вам нужно установить обработчик onClick на <button>.handleClick определено в App и должно быть передано до <button>:

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