我有一個這樣的組件
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);
對于組件行，我單擊它并更改背景顏色。當我再次單擊時，背景顏色會變回原來的顏色。這作業正常。
我想要做的是，當我點擊組件行時，所有其他選定的行組件背景都應該被洗掉，這樣我選擇的那個應該只有背景。
有人可以幫我嗎？
uj5u.com熱心網友回復：
您需要為每個專案設定單獨的標志。例如，您可以參考以下代碼段。
您需要檢查索引，然后為該標志分配值
const tempData = [...arryData];
tempData[index] = {
...tempData[index],
isActive: value,
};
setState(tempData);
uj5u.com熱心網友回復：
你可以這樣做
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>
);
}
uj5u.com熱心網友回復：
我希望這會有所幫助，謝謝。
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>
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/496616.html
標籤：javascript 反应