javascript - 反应如何更改列表中的单个按钮

Question

我有一个从基础渲染内容的列表，每个列表项都有一个“收藏夹”按钮，用于将项目移动到渲染的开头。问题是当我单击“收藏夹”（星号）按钮时，我不知道如何更改单个元素的图标。

我试图通过 LocalState 来做到这一点，但正因为如此，当我点击一个单独的按钮“添加到收藏夹”时，一切都会立即改变

按下前

后

代码

import { useState } from "react"

const WaysItem = (props) => {
    let [change, setChange] = useState(false)
    return props.directionsToRender.map((item, index) => (
        <li
            className={`ways-item`}
            key={index}
            onClick={() => {
                props.getCurrentDirections(index)
            }}
        >
            <div>
                <h5>{item.title}</h5>
            </div>
            <div className="ways-kilometrs">
                <div>{item.direction.routes[0].legs[0].distance.text}</div>
                <div>{item.direction.routes[0].legs[0].duration.text}</div>
            </div>
            <button onClick={() => setChange((change) => !change)} key={index}>
                <i className={`${!change ? "far" : "fas"} fa-star`}></i>
            </button>
        </li>
    ))
}

export default WaysItem

Answer 1

您可以将数组作为 state 。并在按钮单击时添加或删除索引。

import { useState } from "react"

const WaysItem = (props) => {
    let [selectedItems, setSelectedItems] = useState([])

    const onButtonClick = (index) => {
       // if index is already there in the selectedItems then remove it
       if(selectedItems.includes(index)){
         setSelectedItems(selectedItems.filter(item => item !== index))
       } else {
        setSelectedItems(prevSelectedItems => [...prevSelectedItems, index]);
       }
    }

    return props.directionsToRender.map((item, index) => {
      const showStar = selectedItems.includes(index);
      return (
        <li
            className={`ways-item`}
            key={index}
            onClick={() => {
                props.getCurrentDirections(index)
            }}
        >
            <div>
                <h5>{item.title}</h5>
            </div>
            <div className="ways-kilometrs">
                <div>{item.direction.routes[0].legs[0].distance.text}</div>
                <div>{item.direction.routes[0].legs[0].duration.text}</div>
            </div>
            <button onClick={() => onButtonClick(index)} key={index}>
                <i className={`${showStar ? "far" : "fas"} fa-star`}></i>
            </button>
        </li>
    )})
}

export default WaysItem