为什么我的 React 图像 onClick function 不工作？

Question

我对反应很陌生，并且正在努力制作一些东西，在那里你可以按下一个可以掷骰子的按钮。 现在，我目前只是想让图像可点击，当你点击它时，它会“掷骰子”。 但是，我的图片在点击时没有改变，并且我在 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;

Answer 1

您可以通过以下方式进行

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

Answer 2

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

这是一个更好的策略。 它利用了React.useState钩子。

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} />;
}