使用 React onClick() 事件更改 CSS 样式

设计样式是创建网站时的主要任务之一。我们不得不一次又一次地操纵 CSS 样式来为我们正在构建的应用程序提供更好的外观。因此，在本文中，我们将了解如何使用 React 更改 CSS 样式。具体来说，我们将看到一个事件（onClick）如何改变 CSS 样式。在这里，我们将使用 React 钩子来实现问题陈述。 React hooks 有助于管理功能组件的状态。

方法：在使用功能组件时，引入 React 钩子非常重要。它使 React 生命周期中的状态管理变得更加容易。此外，在构建组件时它更容易并且使用更少的代码。因此，我们将利用 React 钩子的功能来实现我们的问题陈述。在这里，我们将创建一个小应用程序来理解这个概念。因此，基本上，我们将通过使用 onClick() 事件来更改容器的背景颜色。我们将首先为我们的应用程序定义 CSS。一旦用户点击按钮，背景颜色就会通过改变状态来改变。 React 钩子的原理将使我们的事情变得更容易。

现在，让我们开始文件结构和编码部分。

创建反应应用程序：

第 1 步：使用以下命令创建一个 React 应用程序：

npx create-react-app appname

确保应用名称以小写字母开头。

第 2 步：创建项目文件夹后。现在，使用以下命令跳转到相应的文件夹：

cd appname

项目结构：现在，文件结构将如下所示：

我们的应用文件结构

第三步：在上面的文件结构中，我们只会用到App.js和App.css文件。让我们首先为我们的应用程序提供 CSS 样式。所有的 CSS 代码都必须写在App.css文件中。将下面提到的代码复制到 App.css 文件中。

App.css

.App {
  font-family: sans-serif;
  text-align: center;
  background-color: aqua;
}
.cont {
  width: 250px;
  height: 250px;
  margin-top: 50px;
  margin-left: 150px;
  background-color: violet;
}
.button {
  border-radius: 8px;
  font-size: 20px;
  background-color: red;
  color: white;
  margin-left: 70px;
  margin-top: 100px;
}
.cont2 {
  width: 250px;
  height: 250px;
  margin-top: 50px;
  margin-left: 150px;
  background-color: yellow;
}

App.js

import React, { useState } from "react";
import "./App.css";
const App = () => {
  const [style, setStyle] = useState("cont");
  
  const changeStyle = () => {
    console.log("you just clicked");
  
    setStyle("cont2");
  };
  return (
    <>
      CHANGE CSS STYLING WITH ONCLICK EVENT
      
        
      
    
  );
};
export default App;

第 4 步：现在，让我们开始在App.js文件中实现 React hooks 方法。在上面的代码中，我们将初始状态（样式）值设置为字符串。这个值是我们将在 Button 中使用的 className。最初，该值被定义为在我们的 App.css 文件中定义 CSS 样式的cont 。我们将此状态值提供给按钮的className 。

现在，下一步是为按钮定义 onClick 处理程序。所以， changeStyle是按钮处理程序。为了改变状态值，我们定义了我们的 setState 值，在我们的例子中是 setStyle。这是在 changeStyle 内部触发的。因此，一旦我们单击按钮，就会执行 changeStyle，它会进一步执行 setStyle 以更改状态，即 cont2。

应用程序.js

import React, { useState } from "react";
import "./App.css";
const App = () => {
  const [style, setStyle] = useState("cont");
  
  const changeStyle = () => {
    console.log("you just clicked");
  
    setStyle("cont2");
  };
  return (
    <>
      CHANGE CSS STYLING WITH ONCLICK EVENT
      
        
      
    
  );
};
export default App;

第 5 步：使用以下命令运行代码：

npm start

输出：现在打开浏览器并访问 http://localhost:3000/，您将看到以下输出。之后，单击背景颜色变为黄色。

单击按钮时背景颜色发生了变化。