当我单击图标并将文本保存为状态响应时，无法更改图标

Question

我有两个链接添加到fav图标。

当我单击图标时，我想要将星号图标更改为另一颗星，并按钩子获取链接名称到状态。

远足先登

顺便说一下，我使用箭头函数组件。

{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

简单地说，您可以更新状态onClick，根据状态，它将呈现或更改该图标。

假设<star/>和<fullStar/>是我们将要使用的图标。

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

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

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

<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);

}；

在这里，您在handleChange()按钮上调用onClick函数，并将当前的item或el (在我的情况下)传递给它。

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