保存数据后更改按钮颜色

Posted 2023-02-21

【中文标题】保存数据后更改按钮颜色

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

【参考方案1】：

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

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

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

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