单击反应时如何更改按钮的颜色？ [复制]答案

【问题标题】：How do i change the color of a button when clicked in react? [duplicate]单击反应时如何更改按钮的颜色？ [复制]
【发布时间】：2021-09-16 14:37:46
【问题描述】：

我是react 的新手，我正在尝试使用useState 钩子在单击时更改按钮的颜色。请问我该怎么做。下面是代码

import { Button } from 'bootstrap'
import React, { useState } from 'react'
import "../workout/style.css"

const [buttonColor, setButtonColor] = useState()

function Workout() {

    let buttonColor = document.getElementsByClassName("button")

    return (
        <div>
            <div class="container">
                <button className="button">BODYWEIGHT</button>
                <button className="button">BARBELL</button>
                <button className="button">DUMBELLS</button>
                <button className="button">KETTLEBELLS</button>
                <button className="button">STRETCHES</button>
            </div>
        </div>
    )
}

export default Workout

【问题讨论】：

有人有同样的问题：stackoverflow.com/questions/65639383/…

标签： javascript css reactjs react-hooks frontend

【解决方案1】：

react 中的状态是特殊的变量。

它们像常量一样工作，所以当你分配一个值时，它根本不会改变。

当您使用 setState 函数设置新值时，（顺便说一下更改值的唯一方法）组件会重新渲染。

所以，回答您的问题...将 onClick 属性应用于按钮。

<div>
    <div class="container">
        <button className="button" onClick={()=> setButtonColor(newColor)} style={{backgroundColor: `${buttonColor}`}}>BODYWEIGHT</button>
        <button className="button">BARBELL</button>
        <button className="button">DUMBELLS</button>
        <button className="button">KETTLEBELLS</button>
        <button className="button">STRETCHES</button>
    </div>
</div>

请记住，waybi 使用此代码的 buttonColor 将采用诸如“红色”、“蓝色”之类的值...等

【讨论】：

【解决方案2】：

以下是为按钮背景着色的两种方法的几个示例onClick：

const { useState } = React;

function App() {
  const [btnClass, setBtnClass] = useState(false);
  const [btnColor, setBtnColor] = useState("red");
  return (
    <div className="App">
      <button
        onClick={() => {
          btnClass ? setBtnClass(false) : setBtnClass(true);
        }}
        className={btnClass ? "btnClass clicked" : "btnClass"}
      >
        button
      </button>
      <button
        onClick={() => {
          btnColor === "red" ? setBtnColor("green") : setBtnColor("red");
        }}
        style={{ backgroundColor: btnColor }}
      >
        button
      </button>
    </div>
  );
}

ReactDOM.render(
  <App />,
  document.getElementById("root")
);

.App {
  font-family: sans-serif;
  text-align: center;
}

.btnClass {
  background-color: red;
}

.btnClass.clicked {
  background-color: green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>

<div id="root"></div>

https://codesandbox.io/s/focused-cloud-m0qqx?file=/src/styles.css:0-148

【讨论】：

【解决方案3】：

请检查 useEfect 或 SetState，我推荐 UseEfect 用于这种情况。转到文档以获取更多信息https://reactjs.org/docs/hooks-state.html

import React, { useState } from 'react';

function Example() {
  // Declare a new state variable, which we'll call "count"
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

记得在你的组件上添加 bem 并加载它。

【讨论】：