如何通过在 ReactJS 中使用带有多个按钮的 onClick 函数来更改样式类 - Javascript

在ReactJS中，我们可以通过 className 属性来设置HTML元素的CSS类名。简单的来说，想要更改一个元素的CSS样式，我们只需要通过添加或删除CSS类名来完成。在本文中，我们将介绍如何通过在ReactJS中使用带有多个按钮的 onClick 函数来更改样式类。

1. 准备工作

首先，我们需要为ReactJS应用程序准备好所需要的基本组件。这些组件可以在自己的文件中定义。此外，我们还需要在React应用程序中安装所需的依赖项，如下所述：

npm install --save react react-dom

2. 实现思路

我们的目标是根据用户的单击事件，在要更改样式的元素上添加或删除CSS类名。我们将使用 state 来跟踪当前CSS类名称的状态，并在每个按钮单击事件时更新状态。

以下是实现思路的简明步骤：

1. 创建一个 class 组件，并在 constructor 函数中初始化 state，并定义一个初始CSS类名称（例如，"default"）。
2. 在组件的 render 函数中，我们将使用 className 属性指定元素的CSS类名。
3. 创建多个按钮，并为每个按钮添加一个 onClick 事件处理程序。 每个 onClick 回调函数都应该根据需要添加或删除CSS类名，并更新 state 中的 className 属性。

3. 代码示例

3.1 初始化组件状态

在构造函数中定义初始化状态，并将其应用于组件的根DOM元素。

import React, { Component } from 'react';

class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      className: 'default'
    };
  }

  render() {
    return (
      <div className={this.state.className}>
        // TO DO: Add buttons here
      </div>
    );
  }
}

export default MyComponent;

3.2 添加多个按钮

向组件中添加多个按钮，并在每个按钮的 onClick 回调函数中更改 className 属性。

import React, { Component } from 'react';

class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      className: 'default'
    };
  }

  handleClick1 = () => {
    if(this.state.className === 'default') {
      this.setState({className: 'button-1'});
    } else {
      this.setState({className: 'default'});
    }
  }

  handleClick2 = () => {
    if(this.state.className === 'default') {
      this.setState({className: 'button-2'});
    } else {
      this.setState({className: 'default'});
    }
  }


  render() {
    return (
      <div className={this.state.className}>
        <button onClick={this.handleClick1}>Button 1</button>
        <button onClick={this.handleClick2}>Button 2</button>
      </div>
    );
  }
}

export default MyComponent;

以上代码在每个 onClick 回调函数中检查当前的CSS类名是否为 “default” 如果是，则将其更改为另一个CSS类名。如果当前CSS类是“button-1”或“button-2”中的一个，则将其更改回“default”。

最后，我们可以添加所需的CSS样式来实现我们的按钮样式。例如:

.default {
  /* ...Default styles... */
}

.button-1 {
  /* ...Button 1 Styles... */
}

.button-2 {
  /* ...Button 2 Styles... */
}

小结

我们已经展示了如何通过ReactJS中的 onClick 回调函数来更改元素的CSS类名。 本例使用了一个简单的 class 组件，但我们可以使用相同的思路将其应用于其他类型的组件（例如， function 组件）。希望这篇文章可以帮助您更好地理解 ReactJS 的样式绑定方式。