如何更改单击控件的背景色

Question

我有这样一个组件

const Row = () => {
    const [isActive, setIsActive] = React.useState(false);

    return (
        <div
          style={{
            backgroundColor: isActive ? 'green' : '#c8c7c5',
          }}
          onClick={e => {
            setIsActive(currentState => {
              return !currentState;
            });
          }}
        >
         hello
        </div>
    );
  };

我在另一个组件中多次使用该组件，如下所示

const ItemsArr= [
    {
      id: 'list-1',
      component: <Row />
    },
    {
      id: 'list-2',
      component: <Row />
    },
    {
      id: 'list-3',
      component: <Row />
    }
  ];
  const [listItems, setListItems] = React.useState(ItemsArr);

对于组件行，我点击它和背景色变化。当我再次单击时，背景色会变回原来的颜色。这很好用。

我想要做的是，当我点击组件行时，所有其他选定的行组件背景都应该被移除，这样我选择的那个就应该只有背景。

有人能帮我吗？

Answer 1

您需要为每个项目设置单独的标志。例如，您可以参考下面的片段。

您需要检查索引，然后为该标志赋值。

const tempData = [...arryData];
          tempData[index] = {
            ...tempData[index],
            isActive: value,
          };
          setState(tempData);

Answer 2

我希望这会有帮助，谢谢。

export const Row = () => {

  return (
      <div >
       hello
      </div>
  );
};

以下是设置背景色行的方法：

const ItemsArr= [
  {
    id: 'list-1',
    component: <Row />
  },
  {
    id: 'list-2',
    component: <Row />
  },
  {
    id: 'list-3',
    component: <Row />
  }
];

const [listItems, setListItems] = React.useState(ItemsArr);

<div>
  {listItems.map((item, index) => (
     <div onClick={() => setIsActive(index)} style={{
          backgroundColor: index === isActive ? 'green' : '#c8c7c5',
      }}>
         {item.component}
     </div>
 ))}
 </div>

Answer 3

你可以这样做

const Row = ({id, isActive, onClick}) => {

  return (
      <div
        style={{
          backgroundColor: isActive ? 'green' : '#c8c7c5',
          
        }}
        onClick={()=>onClick(id)}
      >
       hello
      </div>
  );
};
export default function App() {
  const ItemsArr= [
    {
      id: 'list-1',
      component: Row
    },
    {
      id: 'list-2',
      component: Row
    },
    {
      id: 'list-3',
      component: Row
    }
  ];
  
  const [activeID, setActiveID] = React.useState("");
  const [listItems, setListItems] = React.useState(ItemsArr);
  return (
    <div className="App">
      {listItems.map(item=>(
        <item.component id={item.id} isActive={item.id === activeID} key={item.id} onClick={setActiveID} />
      ))}
    </div>
  );
}