反应按钮我想在按下时更改其样式

Question

'导出默认函数 评级（道具）{ 常量 [悬停，setHover] =使用状态（假）; // 检查悬停状态常量 [com， setCom] = use 状态（假）; //检查点击状态

function isHover(){
    setHover(true);} //connects to onMouseOver event then sets the hover state

function isNotHover(){ //connects to onMouseLeave event then sets the hover state
    setHover(false);}

function op(){              //Send the Id of the rating button back to app.js so
    props.op(props.id);}    // it can be then forwarded to another page
   

function designs(){           //connects the click to sate, if the state is true it makes it false
    com ? setCom(false):setCom(true)} // and vice verca 
    

function bth(){     // I have two functions on click so this combines both 
    op()            //the functions and gives it as one to the clicke event 
    designs()}

    pressed //is style after clicked
    rateStyle //is style before clicked
return(
<div style={hover|| com  ? pressed: rateStyle} onMouseOver={isHover}
 onMouseLeave={isNotHover} onClick={bth} >
{props.valN}
</div>)

}'我有五个评级按钮，我想在单击另一个按钮时取消单击已单击的按钮。通过点击我的意思是，当我点击其中一个按钮时，他们的样式主要改变为背景颜色，现在我希望当有人按下另一个评级时，我希望以前点击的按钮的样式恢复正常，新按下的按钮转到活动状态帮助。

Answer 1

这个问题我用了这个方法。

在你的纽扣里

<button id="button" onClick={
        (e) => {
            if(res === "unpressed"){
          //if button is pressed for first             
          //time
             e.target.style.backgroundColor ="rgb(195, 197, 64)";
  setRes(pressed);
  //Update res into false
      }else{
      //if button is pressed for second             
       //time
   e.target.style.backgroundColor ="rgb(195, 17, 64)";
  setRes(unpressed);
  //Update res into false
      
  }
  }
        }>
  STAR

</button>

使用钩子

import { useState } from "react";

const [res,setRes] = useState("unpressed");