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

Posted 2023-02-22

【中文标题】单击反应时如何更改按钮的颜色？ [复制]

【英文标题】：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

【问题讨论】：

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

【参考方案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 并加载它。