保存数据后更改按钮颜色答案

【问题标题】：change button color after saved data保存数据后更改按钮颜色
【发布时间】：2022-01-23 13:16:52
【问题描述】：

这里我创建了一个 React 组件，我想在一个框中显示问题，如果将调用保存按钮然后想更改问题的颜色，那么问题将在单击问题的数量后发生变化保存了我该如何实现？

import React, {  useState } from "react";
function Counter(){
const data=[{questionId:"1",desc:"question1"},{questionId:"2",desc:"question2"}]

const [currentData,setCurrentData] =useState('')
const [active,setActive] =useState('yellow')
const [savedData,setSavedData] =useState()

function handleClick(data){
   setCurrentData(data)
}
function handleSave(data){
    console.log(data)
    setSavedData(data) 
 }


return(
    <>
    <div style={{display:"flex",justifyContent:"center"}}>
      <div style={{border:"2px solid red",height:"50vh",width:"50vw"}}>

         {currentData}
      </div>
    </div>
    
    <button onClick={()=>{
               handleSave(currentData)
    }}>Save</button>


      {data.map((item,i)=>{
              return(
                 <button onClick={()=>handleClick(item.questionId)} 
       style={{backgroundColor:active}}>{`Q ${i+1}`}</button>
              )
          })}
          </>
       )
         }
            export default Counter;

【问题讨论】：

标签： reactjs

【解决方案1】：

所以你想在点击保存后更改你选择的问题的颜色？

您可以通过更改 div 上带有问题的文本颜色来做到这一点在样式对象内部，只需添加：

color: currentData === savedData ? "red" : "black"

您检查正在显示的问题是否与已保存的问题匹配并更改其颜色

【讨论】：