javascript - 当有多个按钮使用相同功能时，使用单击处理程序更改按钮的颜色

Question

我有三个按钮使用相同的点击处理程序。 - 我的愿望是只在单击时更改一个按钮的颜色。
如果单击另一个按钮，我希望先前单击的按钮返回颜色“蓝色”(原始状态)。
示例代码如下:

import React, { useState } from 'react';

export default function App() {
    const [state, setState] = useState({
        name: 'bob',
        color: 'blue',
    });

    const handleColor = (e) => {
        setState((state) => ({
            ...state,
            color: 'red',
        }));
    };


    return (
        <div>
         <button style={{ backgroundColor: state.color }} onClick={handleColor}>Click Me</button>
         <button style={{ backgroundColor: state.color }} onClick={handleColor}>Click Me 2</button>
         <button style={{ backgroundColor: state.color }} onClick={handleColor}>Click Me 3</button>
        </div>
    );
}

Answer 1

你看起来像这样吗

const lists = [
  { id: 1, title: "Click 1" },
  { id: 2, title: "Click 2" },
  { id: 3, title: "Click 3" }
];
export default function App() {
  const [selected, setSelected] = useState(0);
  const [state, setState] = useState({
    name: "bob",
    color: "blue"
  });

  const handleColor = (row) => {
    setSelected(row.id);
  };

  return (
    <div>
      {lists.map((list) => (
        <button
          key={list.id}
          onClick={() => handleColor(list)}
          style={{ backgroundColor: list.id === selected ? "red" : "" }}
        >
          {list.title}
        </button>
      ))}
    </div>
  );
}

Live working demo