单击图标并将文本保存到状态时无法更改图标 - React

Question

我有几个带有添加到收藏夹图标的链接。

当我点击图标时，我想将星形图标更改为另一个星形，并通过挂钩获得状态的链接名称

远fa星到fas fa星

我使用的箭头功能组件

{reposList?.name !== "Error" &&
reposList?.map(repo => (
<>
<div className="col-6 g-3 ">
<div className="border rounded-pill px-3 py-2 bg-secondary  ">
<i 
class="far fa-star pe-2" role={ 'button'}
></i> 
<a
target="_blank"
href={repo?.html_url}
className="text-light"
>
{repo?.name} 
</a>
<strong className="text-light ps-2">({repo?.language})</strong>
</div>
</div>


</>
))}

Answer 1

只需在Click上更新状态，它就会根据状态渲染或更改该图标。

假设CCD_ 1和CCD_。

您将使用useState创建一个状态，如下所示。

const [starState,setStarState] = useState(false);

现在在图标标签或按钮标签上，我们将添加调用setStarState的onClick

<star onClick={()=> setStarState(!starState)}/>

此外，在渲染之前，您需要检查状态，这就是它的变化方式。

startState ? 
<star onClick={()=> setStarState(!starState)}/> :
<fullStar onClick={()=> setStarState(!starState)}/>

这将根据状态渲染图标。

但是。。。。。。。。。。。如果你正在处理Array of Objects，在你的情况下，你应该这样做，所以你的状态应该是这样的

const [arr, setArr] = useState([
{
name: "A",
isActive: false,
},
{
name: "B",
isActive: false,
},
{
name: "C",
isActive: false,
},
{
name: "D",
isActive: false,
},
]);

现在您只想更新该数组中的一个属性。

const handleChange = (el) => {
let oldArr = [...arr];
let index = oldArr.findIndex((obj) => obj.name === el.name);
oldArr[index].isActive = !oldArr[index].isActive;
setArr(oldArr);

}；

在onClick按钮上调用handleChange()函数，并将当前的item或<star/>0(在我的情况下(传递给它

<button onClick={() => handleChange(el)}>Change state</button>