React - 改变元素onClick的背景颜色的方法

在本教程中，我们将学习如何在React中改变一个元素的点击颜色。

考虑一下，我们的react应用中有以下组件。

import React from 'react';

function Home(){
    return (
        <div>
          <h1>Welcome to my blog</h1>
        </div>
    )
}

export default Home;

要在React中改变一个元素的点击背景颜色，请添加onClick 事件处理程序，并在元素被点击时有条件地改变其背景颜色。

下面是一个例子。

import React, { useState } from "react";

function Home() {
  const [active, setActive] = useState(false);

  const handleClick = () => {
    setActive(!active);
  };

  return (
    <div onClick={handleClick}
      style={{ backgroundColor: active ? "black" : "white" }}
     >
       <h1>Welcome to my blog</h1>
    </div>
  );
}

export default Home;

在上面的例子中，我们给onClick 道具添加了一个handleClick 事件处理程序，给style 属性添加了active 状态，所以每当一个div 元素被点击时，就会运行handleClick 函数，将active 状态从false 改为true ，反之亦然。

基于active 状态，我们使用三元组表达式改变div 的背景颜色。

{backgroundColor: active ? "black" : "white" }

如果active是false ，则选择white ，如果是true，则选择black 。

如果你使用css类为你的元素定型，那么你可以像这样在两个css类名之间切换。

下面是一个例子。

import React, { useState } from "react";

function Home() {
  const [active, setActive] = useState(false);
  const handleClick = () => {
    setActive(!active);
  };

  return (
      <div
        onClick={handleClick}
        className={active ? "default" : "success"}
      >
       <h1>Welcome to my blog</h1>
    </div>
  );
}

export default Home;

在上面的例子中，如果active 状态是true ，它选择default 类，如果active 状态是false ，它选择success 类。