有人能解释一下"items.map((item) =>item.id === id?{ ...item,选中:!item.checked }:item“吗?)我只是想出了这样的例子,不知道它是否正确。(如果"onChange={() => Check(2)"}第一个循环:
const listItems = items.map(({id: 1,checked: true,item: "Item 1"}) =>
1 === 2 ? { {id: 1,checked: true,item: "Item 1"}, checked: !True } : "Item 1"
);
第二圈:
const listItems = items.map(({id: 2,checked: true,item: "Item 2"}) =>
2 === 2 ? { {id: 2,checked: false,item: "Item 2"}, checked: !false} : "Item 2"
);
第三圈:
const listItems = items.map(({id: 3,checked: true,item: "Item 3"}) =>
3 === 2 ? { {id: 3,checked: false,item: "Item 3"}, checked: !false} : "Item 3"
);
代码:
const Content = () => {
const [items, setItems] = useState([
{
id: 1,
checked: true,
item: "Item 1"
},
{
id: 2,
checked: false,
item: "Item 2"
},
{
id: 3,
checked: false,
item: "Item 3"
}
]);
const Check = (id) => {
const listItems = items.map((item) =>
item.id === id ? { ...item, checked: !item.checked } : item
);
setItems(listItems);
};
return (
<main>
<ul>
{items.map((item) => (
<li key={item.id}>
<input
type="checkbox"
onChange={() => Check(item.id)}
checked={item.checked}
/>
<label
style={item.checked ? { textDecoration: "line-through" } : null}
onDoubleClick={() => Check(item.id)}
>
{item.item}
</label>
</li>
))}
</ul>
</main>
);
};
发布于 2022-04-03 16:44:09
items.map((item) =>item.id === id ? { ...item, checked: !item.checked } : item"?
items.map()
首先遍历每一项的项array(item) => item.id === id
,检查item.id === id
? { ...item, checked: !item.checked }
是否为item.id checks id
,然后反转item.checked
的值,如果不是,则让它成为如果您的意图是反转复选框或基于其id的wtv,那么这段代码必须是您想要的!
https://stackoverflow.com/questions/71727786
复制相似问题