在 react.js 中单击按钮时添加类

Question

我已经在 React 上工作了几个星期了，虽然我已经掌握了大部分基本语法（属性、状态），但我正在努力与一些概念建立联系，最显着的是在状态时添加类已经改变。我正在尝试构建一个 simon says 游戏，其中包含四个按钮，全部使用 Button 组件构建。这些最初设置为具有 0.3 的不透明度和 false 的活动状态。单击时，状态“活动”变为真，但我终生无法弄清楚如何添加可以使按钮完全不透明的 css 类。这是我的代码：

 class App extends Component {
  constructor(){
    super();
    this.state = {
      active: false
    }
  }
  handleClick(){
    this.setState({active: !this.state.active})
  }
  renderButtons(i, f){
    return <Button value={i} className="button" id={f} active= {this.state.active} onClick={() => this.handleClick()}/>
  }
  render() {
    return (
      <div className="App">
        {this.renderButtons("red", "buttonRed")}
        {this.renderButtons("blue", "buttonBlue")}
        {this.renderButtons("green", "buttonGreen")}
        {this.renderButtons("yellow", "buttonYellow")}
      </div>
    );
  }
}

还有我的 CSS：

 .button{
  width: 100px;
  height: 45px;
  opacity: .3;
  margin: 0 auto;
  margin-bottom: 30px;
}
#buttonRed{
  background: red;
}
#buttonBlue{
  background: blue;
}
#buttonGreen{
  background: green;
}
#buttonYellow{
  background: yellow;
}

所以，此时此刻，我只想在单击按钮时添加一个类，同时仍保留组件的“按钮”类。谁能帮忙？

原文由 Ian Springer 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

React 有几种方法可以做到这一点。第一个是 Tudor Ilisoi 建议的，它只是连接字符串。第二种方法是给 className 一个 Object 而不是 string 。这种方式可以说更简单，但需要您添加 classnames 模块。您可以使用 npm install --save classnames 或 yarn add classnames 安装它。你可以导入它：

 import classNames from 'classnames';

然后你可以通过以下方式使用它：

 <button className={classNames({button: true, active: this.state.active})} />

第一对大括号只是告诉 React 我们正在传递一个动态属性，第二对只是对象的普通 JavaScript 语法。请注意，该对象由 classNames() 函数包装。如果我们早点声明它，我们可以很容易地做到：

 render(){
    const classes = classNames({
        button: true, // we always want this class
        active: this.state.active, // only add this class if the state says so
     });

     return (
          <button className={classes} />
     );
}

原文由 Mobius 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

如果您正在寻找 ²⁰²¹⁄₂₀₂₂ 答案：这是一个使用反应钩子的示例，当我们单击“切换类”按钮时，它将类名 app 添加到 div 元素。

  import React, { useState } from "react";import "./styles.css";

export default function App() {
  const [isActive, setActive] = useState("false");
  const handleToggle = () => {
    setActive(!isActive);  };
  return (
    <div className={isActive ? "app" : null}>
       <h1>Hello react</h1>
       <button onClick={handleToggle}>Toggle class</button>
    </div>
  );
}

原文由 David Elkabas 发布，翻译遵循 CC BY-SA 4.0 许可协议