Javascript 如何更改颜色按钮onclick react.js

我使用按钮，点击我需要改变按钮的颜色

我有两个按钮：favorite和stats，onclick我需要更改为自定义颜色，因为前favorite是橙色，stats是蓝色

我怎样才能在点击时改变颜色

<div className={classes.fotter_button}>
                    <button>
                      <FontAwesomeIcon
                        icon={faStar}
                        aria-hidden="true"
                      />
                    </button>
                    <button>
                      <FontAwesomeIcon
                        icon={faChartBar}
                        aria-hidden="true"
                      />
                    </button>
                  </div>

---

一种方法是在组件中添加状态变量，并使用函数在两个值true和false之间更改状态变量。基于状态变量的值应用按钮样式

const MyToggleButton = () => {
 const [toggle, setToggle] = React.useState(false);
 const toggleButton = () => setToggle(!toggle);
 
 return (
  <>
    <button style={{backgroundColor: toggle ? '#FFF' : '#000'}} onClick={toggleButton}>Click Me</button>
  </>
 );
}

---

我的例子很一般；如果可能的话，请考虑使用状态变量更恰当地描述按钮两个状态。您需要更具体地说明您遇到的问题，并且需要显示一些与您所问问题相关的代码color@Andrew每个按钮都需要一个状态变量，或者像我的示例一样创建一个按钮组件，重复使用。同样的结果，表单上的所有Buton都会改变颜色。你是什么意思？我分别对每个按钮进行了更改。你是这样输入代码的吗？是的，我需要单独更改按钮的每种颜色。所以，有什么问题吗？此代码分别更改按钮的每种颜色。解释一下你自己这个代码改变了表格上所有的颜色

const [favorite,setFavorite]=useState(false)
const [stats,setStats]=useState(false)

<div className={classes.fotter_button}>
                <button onClick={()=>{setFavorite(true)}} style={{backgroundColor:favorite==true?"orange":""}}>
                  <FontAwesomeIcon
                    icon={faStar}
                    aria-hidden="true"
                  />
                </button>
                <button onClick={()=>{setStats(true)}} style={{backgroundColor:stats==true?"blue":""}}>
                  <FontAwesomeIcon
                    icon={faChartBar}
                    aria-hidden="true"
                  />
                </button>
              </div>