如何在TypeScript中使用onClick更改此div的颜色?

myzjeezk  于 2023-06-07  发布在  TypeScript
关注(0)|答案(1)|浏览(183)

我希望这个div的背景是蓝色的点击时:

{data1.map((item) => (
        // i want this div to be blue onclick
        <div className="hover:bg-[#B2BABB]  cursor-pointer w-full">
          <Flex direction="col" className="pl-12">
            <p className="text-xl text-primary font-medium pl-4">
              {' '}
              {item.value2}
            </p>
          </Flex>
        </div>
      ))}

以下是我迄今为止尝试的一个片段:

const handleClick = () => {
    setBgColor('#0000FF'); 
  };
sqxo8psd

sqxo8psd1#

这就是你想达到的目的吗?

export default function App() {
  const [bgColor, setBgColor] = React.useState('#00FF00');

  function handleClick() {
    setBgColor('#0000FF');
  }

  return (
    <div>
      <h1>Click the div!</h1>
      <div
        style={{ border: '1px solid', backgroundColor: bgColor }}
        onClick={handleClick}
      >
        Click me to change colour.
      </div>
    </div>
  );
}

https://stackblitz.com/edit/stackblitz-starters-dg98nz?file=src%2FApp.tsx

相关问题