在 react:js 中更改单击按钮的背景颜色

Question

当我点击一个按钮时，我有一些按钮我希望通过更改按钮的背景颜色来突出显示它，直到单击任何其他按钮

function clickedtime(e) {
   var time = e.target.value;
   settime(time);
  
 }

<TabPanel className="tabcss" style={styles.tabpannel}>
                 <button
                   onClick={clickedtime}
                   value="9:00am"
                   style={styles.button}
                 >
                   9:00am
                 </button>
                 <button
                   onClick={clickedtime}
                   value="9:30am"
                   style={styles.button}
                 >
                   9:30am
                 </button>

                ....


               </TabPanel>

Answer 1

使用事件处理程序和 useState 像这样设置颜色 onClick

const[btn,setBtn]=useState([0,0]);//mean two button

const[sel,setSel]=useState(0);//mean 0 button is selected by default
function clickedtime(e,index) {
var time = e.target.value;
 settime(time);
 setSel(index)//selected btn is 0in this case
}

现在为您的标签面板更改样式为 style={{backgroundColor:col}} 以及更改标签面板样式，就像我提到的

<TabPanel className="tabcss" style={styles.tabpannel}>
           btn.map((item,index)=>{
           sel==index?

           <button
               onClick={(index)=>{clickedtime(index)}}
               value="9:00am"
               style={{backgroundColor:"red"}}
             >
               9:00am
             </button>
           :
             <button
               onClick={clickedtime}
               value="9:00am"
               style={{backgroundColor:"white"}}
             >
               9:00am
             </button>
             


             }  
            ....


           </TabPanel>

Answer 2

您可以将所有按钮添加到 class，向它们添加事件侦听器，然后在触发单击事件时将另一个名为“clicked”的 class 附加到它们。

 var buttons = document.getElementsByClassName("time-button"); var click_listener = function(event) { //console.log("clicked " + event.target); for (var i = 0; i < buttons.length; i++) { buttons[i].classList.remove("clicked"); } event.target.classList.add("clicked"); }; for (var i = 0; i < buttons.length; i++) { buttons[i].addEventListener("click", click_listener, false); }

 .clicked { background-color: orange; }

 <button class="time-button">9:30 am</button> <button class="time-button">9:00 am</button> <button class="time-button">8:30 am</button> <button class="time-button">8:00 am</button>