如何使用 React Hooks 在按钮单击时更改图像？

Question

我正在学习 React，我想制作两个按钮：白色和黑色，将图像更改为白色 T 恤和黑色 T 恤。

我的目标是使用 React Hooks 来实现这一点。

import React, { useState, useEffect } from "react";
// import Black from "../../assets/black.jpg";
// import White from "../../assets/white.jpg";
import "./Shirts.css";

function Shirts() {
  const [white, setWhite] = useState(false);
  const [black, setBlack] = useState(true);

  const whiteImage = require(`../../assets/white.jpg`);
  const blackImage = require(`../../assets/black.jpg`);

  function changeToWhite() {
    console.log(setWhite(whiteImage));
  }

  function changeToBlack() {
    console.log(setBlack(blackImage));
  }

  // useEffect(() => {
  //   setWhite(white);
  // }, white);

  return (
    <div>
      <div className="Shirts">
        <img alt="T-Shirt" className="White" src={white} />
        <img alt="T-Shirt" className="Black" src={black} />
      </div>
      <div className="ColorPicker">
        <button className="WhiteB" onClick={changeToWhite}>
          <p className="WhiteT">
            W<br />
            H<br />
            I<br />
            T<br />E
          </p>
        </button>
        <button className="BlackB" onClick={changeToBlack}>
          <p className="BlackT">
            B<br />
            L<br />
            A<br />
            C<br />K
          </p>
        </button>
      </div>
    </div>
  );
}

export default Shirts;

我实现的是它们在第一次点击时加载，但随后它们停止工作。

Answer 1

首先导入两个图像：

const white = require('./images/white.png')
const black = require('./images/black.png')
const shirts = { white, black }

现在将selectedT 恤绑定到一个州的属性并将其传递为src：

const Shirts = () =>{
    const [selected, setSelected] = useState(shirts.white)

   return(
       <>
           <img src={selected} alt='shirt' />
           <button onClick={() => setSelected(shirts.black)}> Click</button>
       </>
   )
}