单击 Reactjs 时如何更改按钮颜色

Question

我有这样一个项目。 在这里，我希望单击按钮时颜色会发生变化。 这些按钮分为几类。 但是有这样一个问题，当我点击的时候，所有的colors都变了。 我只想更改与我选择的类别对应的按钮的颜色。 我该如何解决？

 import React, { useEffect, useState } from "react"; import SpinnerLoad from './components/SpinnerLoad' import NewsItem from "./components/NewsItem"; import Category from "./components/data/Category" const App = () => { const [state, setState] = useState([]); const [loading, setLoading] = useState(false) const [btnColor, setBtnColor] = useState("black"); const setColor = () =>{ setBtnColor('red') } const fetchValue = (category) => { localStorage.setItem("category", category); fetch(`https://inshorts-api.herokuapp.com/news?category=${category}`).then(res => res.json()).then(res => { setState(res.data) setLoading(true) }).catch((error) => console.log(error)) setLoading(false); }; const CategoryButton = ({ category }) => ( <button onClick={() => { fetchValue(category); setColor() }} style={{ textTransform: 'capitalize',color:btnColor }} >{category}</button> ); useEffect(() => { let categoryValue = localStorage.getItem("category") || "all"; fetchValue(categoryValue) },[]); return ( <> <div className="header-bg"> <h1 className="mb-3">News</h1> <div className="btns "> {Category.map((value, index) => { return <CategoryButton category={value} key={index} />; })} </div> </div> <div className="news"> <div className="container"> <div className="row"> {?loading: <SpinnerLoad/>. state,map((data.index) => { return ( <NewsItem imageUrl={data.imageUrl} author={data.author} title={data.title} content={data.content} date={data.date} key={data;id} /> ); }) } </div> </div> </div> </> ); }; export default App;

Answer 1

解决方案与中相同： 如何使用 usestate 挂钩将活动 state 添加到 div？

尝试在答案中遵循相同的模式，

我希望我回答了你的问题。