单击任何其他项目时如何将（最后单击的列表项）恢复为原始颜色 - 反应挂钩

Question

我正在尝试在 React 中实现此功能：

默认状态：所有列表项都是蓝色的；

如果单击一个特定项目：同一项目的文本颜色变为红色；

单击任何其他项目时：最后一个项目的文本颜色恢复为蓝色；

在我的代码中，项目文本颜色保持红色，即使单击其他项目也是如此。

我在这里搜索了一下，似乎我应该使用 useRef 和 item.id，但我对如何实现这个特定功能感到困惑。

谢谢

App.js

import { useState } from 'react'
import Item from './components/Item'

function App() {
    const [items, setItems] = useState([
        {
            id: 1,
            name: 'Item 1',
        },
        {
            id: 2,
            name: 'Item 2',
        },
    ])

    return (
        <>
            {items.map((item) => (
                <Item key={item.id} id={item.id} name={item.name} />
            ))}
        </>
    )
}

export default App

Item.jsx

import { useState } from 'react'

function Item({ id, name }) {
    const [clicked, setClicked] = useState(false)
    const handleClick = () => {
        setClicked(!clicked)
    }
    return (
        <>
            <button
                onClick={handleClick}
                style={{ color: clicked ? 'red' : 'blue' }}
                key={id}
            >
                {name}
            </button>
        </>
    )
}

export default Item

Answer 1

需要在父组件中维护选中的id，根据选中我们可以改变按钮文字的颜色。

App.jsx

import { useState } from 'react'
import Item from './components/Item'

function App() {
  const [items, setItems] = useState([
    {
      id: 1,
      name: 'Item 1',
    },
    {
      id: 2,
      name: 'Item 2',
    },
  ])

  const [selectedId,setSelectedId] = useState(null)

  return (
    <>
      {items.map((item) => (
        <Item key={item.id} id={item.id} name={item.name} handleClick={() => setSelectedId(item.id)} clicked={selectedId === item.id} />
      ))}
    </>
  )
}

export default App

Item.jsx

function Item({ id, name, clicked, handleClick }) {
  return (
    <button
      onClick={handleClick}
      style={{ color: clicked ? 'red' : 'blue' }}
      key={id}
    >
      {name}
    </button>
  )
}

单击任何其他项目时如何将（最后单击的列表项）恢复为原始颜色 - 反应挂钩

how to revert (last clicked list item) back to its original color when any other item is clicked - react hooks

javascript

reactjs

react-hooks

use-state