为什么我的 React 图像 onClick 功能不起作用？答案

【问题标题】：Why isn't my React image onClick function working?为什么我的 React 图像 onClick 功能不起作用？
【发布时间】：2021-12-31 00:11:35
【问题描述】：

我对反应非常陌生，正在努力制作一些你可以按下的按钮来掷骰子的东西。现在，我目前只是想让图像可点击，当你点击它时，它会“掷骰子”。但是，我的图片在点击时没有改变，并且我在 VSCode 中没有收到任何错误。任何帮助表示赞赏。

import React from 'react'

import dice1 from './assets/dice1.png';
import dice2 from './assets/dice2.png';
import dice3 from './assets/dice3.png';
import dice4 from './assets/dice4.png';
import dice5 from './assets/dice5.png';
import dice6 from './assets/dice6.png';


function DiceRoll(e) {
var number = Math.floor(Math.random() * 6) + 1;

switch(number) {
  case 1: e.target.setAttricute('src', {dice1}); break;
  case 2: e.target.setAttricute('src', {dice2}); break;
  case 3: e.target.setAttricute('src', {dice3}); break;
  case 4: e.target.setAttricute('src', {dice4}); break;
  case 5: e.target.setAttricute('src', {dice5}); break;
  case 6: e.target.setAttricute('src', {dice6}); break;
  default: return <h1>Something went wrong</h1>
}
}

function App() {
  return (
        <img 
         src={dice1}
         onClick={DiceRoll}
         />
    
  );
}

export default App;

【问题讨论】：

只需使用 UseState 并使用它设置图像 src。

标签： html reactjs jsx

【解决方案1】：

你有一个错字，e.target.setAttricute 应该是e.target.setAttribute。

这是一个更好的策略。它利用React.useStatehook。

const dice = [die1, die2, die3, die4, die5, die6];

function App() {
  const [srcImg, setSrcImg] = React.useState(die1);

  const rollDie = () => {
    const randNum = ~~(Math.random() * dice.length);
    setSrcImg(dice[randNum]);
  }

  return <img src={srcImg} onClick={rollDie} />;
}

【讨论】：

【解决方案2】：

您可以通过以下方式进行操作

import { useState } from "react";

const imgs = [
  "https://via.placeholder.com/350x150",
  "https://via.placeholder.com/240x160",
  "https://via.placeholder.com/480x240",
  "https://via.placeholder.com/350x150",
  "https://via.placeholder.com/240x160",
  "https://via.placeholder.com/480x240"
];

export default function App() {
  const [src, setSrc] = useState(0);

  const rollDice = () => {
    const number = Math.floor(Math.random() * imgs.length);

    setSrc(number);
  };

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>

      <h2>{src}</h2>

      <img src={imgs[src]} alt="img" onClick={rollDice} />
    </div>
  );
}

我用同样的方法创建了沙盒。 https://codesandbox.io/s/awesome-water-03xwz

【讨论】：