Question

In react我试图在映射一系列数据后点击一个项目。它看起来像这样：

{Members.map(m => (
    <Menu
      key={m.username}
      onItemClick={console.log(m.username)}
    >
      <Menu.Item>
        <ul>
          <li>
            {m.firstName} {m.lastName}
          </li>
          <li>
            {m.username}
          </li>
        </ul>
      </Menu.Item>
    </Menu>
  ))}

现在我在映射出所有成员后有多个菜单项。我在父<Menu>上进行了onclick，但是当我在列出后尝试点击它们时，它会打印每个用户名。

这样做是否只能打印<Menu>我点击？

修改

当我尝试像这样使用onItemClick时：

onItemClick={() => {
   console.log(m.username);
}}

我收到错误消息：Failed prop type: Prop 'onItemClick' in 'Menu' conflicts with props: 'children'. They cannot be defined together, choose one or the other.

Answer 1

错误和文档非常清楚。您可以将onItemClick与data道具一起使用，也不要让孩子使用，或者像自己一样传递自己的孩子，并直接在其上书写点击处理程序。

  {Members.map(m => (
    <Menu
      key={m.username}
    >
      <Menu.Item onClick={() => { // use onClick here
        console.log(m.username)
      }}>
        <ul>
          <li>
            {m.firstName} {m.lastName}
          </li>
          <li>
            {m.username}
          </li>
        </ul>
      </Menu.Item>
    </Menu>
  ))}

React onItemClick在映射后不触发单个项目

1 个答案: