Кнопки, созданные в React, не работают в Firefox

Question

Я сделал игру в угадайку, но обнаружил, что в Firefox ничего не работает.Игра (https://irenerojas.com/numberguess-react/) отлично работает на Chrome и Safari (на Mac). В Firefox нажатие кнопки (иначе, кота) ничего не делает. Ничего вообще.

У меня не былоудачи при поиске. Самым близким было напоминание, что и не смешивать, но я не использовал, так в чем же причина проблемы?

Репо: https://github.com/irene-rojas/numberguess-react

App.js

import React, { Component } from 'react';
import './App.css';
import Buttons from "./components/Buttons/Buttons";


class App extends Component {

  targetNumber = (min, max) => {
    const targetNum = Math.floor(Math.random()*(max-min+1)+min);
    // console.log(`Target number = ${targetNum}`);

    return targetNum
  };


  state = {
    targetNumber: this.targetNumber(19, 120),
    currentValue: 0,
    gamesWon: 0,
  };

handleClick = (event) => {
    event.preventDefault();
    const currentValue = this.state.currentValue;
    const newValue = parseInt(event.target.getAttribute("value"));
    this.setState(
        {currentValue: currentValue + newValue}
    )
    // console.log(newValue);
}


  componentDidUpdate() {
    if (this.state.currentValue === this.state.targetNumber) {
      this.setState(
      {
        targetNumber: this.targetNumber(19, 120),
        currentValue: 0,
        gamesWon: this.state.gamesWon + 1
      }
    )
  }
else {
    if (this.state.currentValue >= this.state.targetNumber) {
        this.setState(
            {
              targetNumber: this.targetNumber(19, 120),
              currentValue: 0,
              gamesWon: this.state.gamesWon,
            }
        );
       }
    }
  }

  render() {
    return (

  <div className="App">

    <img src={require("./images/frame.png")} alt="frame" id="instructFrame" />

    <div className="resultsDiv">

      <div className="targetNumber">
        Target number = {this.state.targetNumber}
      </div>

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

      <div className="gamesWon">
          Games won = {this.state.gamesWon}
      </div>

    </div>

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

      </div>
    );
  }
}

export default App;

Button.js

import React from "react";
import "./Button.css";


const Button = (props) => {

  return (

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

}

export default Button;

Buttons.js

import React, { Component } from "react";
import Button from "../Button/Button";
import black from "../Button/images/black_cat.png";
import brown from "../Button/images/brown_cat.png";
import gray from "../Button/images/gray_cat.png";
import yellow from "../Button/images/yellow_cat.png";


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}
                      onClick={this.props.onClick.bind(this)}
                    />
                )
            })}

        </div>
    )
    }
}

export default Buttons;

Answer 1

Вы, вероятно, должны пересмотреть вопрос о onClick на img, поскольку ваша оболочка съедает click события прямо сейчас.Переместился img за пределы div, чтобы проверить, и это работает.