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

我有三个按钮使用相同的点击处理程序。-我的愿望是在单击时只更改一个按钮的颜色

如果单击了另一个按钮，我希望先前单击的按钮返回“蓝色”（原始状态）

示例代码如下：

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

import React，{useState}来自“React”；
导出默认函数App（）{
常量[状态，设置状态]=使用状态({
姓名：'鲍勃'，
颜色：“蓝色”，
});
常量handleColor=（e）=>{
设置状态（（状态）=>({
……国家，
颜色：“红色”，
}));
};
返回(
点击我
点击我2
点击我3
);
}

如果您一次只想激活一个按钮，请跟踪哪个按钮处于激活状态，而不是它的颜色

// hypothetical list of buttons. these could be objects with labels, etc.
// but for the purposes of this example they're just empty slots.
const buttons = Array(3);

// the index of the currently active button
const [active, setActive] = useState();

return (
  <div>
    { buttons.map((button, index) => ( // render a button for each item in the array
      <button
        style={active === index ? { backgroundColor: 'red' } : {}}
        onClick={() => setActive(index)}>
          Click Me
      </button>
    )}
  </div>
)

//假设的按钮列表。这些可能是带有标签等的对象。
//但就本例而言，它们只是空插槽。
常量按钮=数组（3）；
//当前活动按钮的索引
const[active，setActive]=useState（）；
返回(
{buttons.map（（按钮，索引）=>（//为数组中的每个项目呈现一个按钮
setActive（索引）}>
点击我
)}
)

您必须为每个按钮保持单独的状态。 你可以这样做

import React, { useState } from 'react';

export default function Parent() {

    const initialButtonState = {
        color1: 'blue',
        color2: 'blue',
        color3: 'blue',
    } 


    const [state, setState] = useState({...initialButtonState , name: 'bob'});

    const handleColor = (colorName) => {
        setState((state) => ({
            ...state,
            ...initialButtonState ,
            [colorName] : 'red'
        }));
    };


    return (
        <div>
         <button style={{ backgroundColor: color1 }} onClick={ () => handleColor("color1))}>Click Me</button>
         <button style={{ backgroundColor: color2 }} onClick={() => handleColor("color2")}>Click Me 2</button>
         <button style={{ backgroundColor: color3 }} onClick={() => handleColor("color3")}>Click Me 3</button>
        </div>
    );
}

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

import React，{useState}来自“React”；
导出默认函数父函数（）{
常量initialButtonState={
颜色1:'蓝色'，
颜色2:'蓝色'，
颜色3:'蓝色'，
} 
const[state，setState]=useState（{…initialButtonState，name:'bob'}）；
常量handleColor=（colorName）=>{
设置状态（（状态）=>({
……国家，
…初始化按钮状态，
[颜色名称]：“红色”
}));
};
返回(
handleColor（“color1））}>单击我
handleColor（“color2”）}>单击我2
handleColor（“color3”）}>单击我3
);
}

你看起来像这样吗

import React, { useState } from 'react';

export default function Parent() {

    const initialButtonState = {
        color1: 'blue',
        color2: 'blue',
        color3: 'blue',
    } 


    const [state, setState] = useState({...initialButtonState , name: 'bob'});

    const handleColor = (colorName) => {
        setState((state) => ({
            ...state,
            ...initialButtonState ,
            [colorName] : 'red'
        }));
    };


    return (
        <div>
         <button style={{ backgroundColor: color1 }} onClick={ () => handleColor("color1))}>Click Me</button>
         <button style={{ backgroundColor: color2 }} onClick={() => handleColor("color2")}>Click Me 2</button>
         <button style={{ backgroundColor: color3 }} onClick={() => handleColor("color3")}>Click Me 3</button>
        </div>
    );
}

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

const列表=[
{id:1，标题：“单击1”}，
{id:2，标题：“单击2”}，
{id:3，标题：“单击3”}
];
导出默认函数App（）{
const[selected，setSelected]=useState（0）；
常量[状态，设置状态]=使用状态({
姓名：“鲍勃”，
颜色：“蓝色”
});
常量handleColor=（行）=>{
所选设置（行id）；
};
返回(
{lists.map（（list）=>(
手绘颜色（列表）}
style={{backgroundColor:list.id==选中？“红色”：“}
>
{list.title}
))}
);
}

---

嗨，瓦希德，这个答案适用于我的情况。-你能帮我理解你为什么通过（世界其他地区）吗作为handleColor函数中的一个道具？row如何引用列表数组？-此外，我注意到当我将“title”更改为“name”或任何其他道具时，函数无法按预期工作。-我很乐意将此标记为正确答案，但只需了解这一点。将

row

传递到handleColor可以让组件记住哪个id是活动的（通过

setSelected（row.id）

），以便在后续渲染时可以将其与每个列表项的id进行比较（

list.id==selected

）确定是否应以红色呈现。#rayhatfield感谢您的解释。@Tenma博士，您可以查看#ray hatfield的评论。当您询问标题/名称时，最好通过id进行处理，因为文本可以复制，而不是id。谢谢，这很有意义，我将标记为正确。如果您有时间，请查看我的沙盒，因为它是mimics我的本地环境。真的需要知道我所做的是否是不好的做法（我正在将所有内容作为状态传递给子组件）。下面是链接@Dr.Tenma代码看起来不错…仅删除const[selected，setSelected]=useState（0）；因为您已在您的状态中使用“选定”。为什么不为自定义按钮创建一个react组件，以便每个按钮都有自己的状态，而不依赖父组件的全局状态？