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

myzjeezk 于 2023-06-07 发布在 TypeScript

关注(0)|答案(1)|浏览(182)

我希望这个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'); 
  };

typescript

来源：https://stackoverflow.com/questions/76399383/how-can-i-change-the-color-of-this-div-with-onclick-in-typescript

1条答案

按热度按时间

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

赞(0）回复(0）举报 2023-06-07

我来回答

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

1条答案

相关问题

热门标签

最新问答