首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >有人能解释“items.map((项目) =>item.id === id?{ ...item,选中:!item.checked }:item”吗?)

有人能解释“items.map((项目) =>item.id === id?{ ...item,选中:!item.checked }:item”吗?)
EN

Stack Overflow用户
提问于 2022-04-03 16:23:45
回答 1查看 518关注 0票数 0

有人能解释一下"items.map((item) =>item.id === id?{ ...item,选中:!item.checked }:item“吗?)我只是想出了这样的例子,不知道它是否正确。(如果"onChange={() => Check(2)"}第一个循环:

代码语言:javascript
运行
复制
    const listItems = items.map(({id: 1,checked: true,item: "Item 1"}) =>
      1 === 2 ? { {id: 1,checked: true,item: "Item 1"}, checked: !True } : "Item 1"
    );

第二圈:

代码语言:javascript
运行
复制
    const listItems = items.map(({id: 2,checked: true,item: "Item 2"}) =>
      2 === 2 ? { {id: 2,checked: false,item: "Item 2"}, checked: !false} : "Item 2"
    );

第三圈:

代码语言:javascript
运行
复制
    const listItems = items.map(({id: 3,checked: true,item: "Item 3"}) =>
      3 === 2 ? { {id: 3,checked: false,item: "Item 3"}, checked: !false} : "Item 3"
    );

代码:

代码语言:javascript
运行
复制
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>
  );
};
EN

回答 1

Stack Overflow用户

发布于 2022-04-03 16:44:09

items.map((item) =>item.id === id ? { ...item, checked: !item.checked } : item"?

  1. items.map()首先遍历每一项的项array
  2. (item) => item.id === id,检查item.id === id
  3. ? { ...item, checked: !item.checked }是否为item.id checks id,然后反转item.checked的值,如果不是,则让它成为

如果您的意图是反转复选框或基于其id的wtv,那么这段代码必须是您想要的!

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/71727786

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档