如何使用 return() 中定义的参数调用 render() 中的函数

Question

我正在努力调用deleteItem 方法。

这是显示我遇到的问题的沙盒。 https://codesandbox.io/s/frosty-rgb-or7om

如果你点击蓝色的delete 按钮，卡片就会从视图中删除，这基本上是我需要发生的事情，除了我正在寻找的行为应该是先点击烤肉串图标然后删除使用下拉菜单中的按钮。

我在kebabDropdownItems const 变量的DropdownItem 组件中添加了一个onClick={() => deleteItem(item)——它告诉我item 没有定义，这是有道理的，因为它是在map 中定义的。我尝试删除 kebabDropdownItems 变量，并直接使用 onClick 方法将这些组件放入 Dropdown 组件的 dropdownItems 属性中。

但这也不起作用，菜单项根本不显示。我尝试在 render 方法中将卡片数组放入它自己的 const 中，这也不起作用。

我错过了什么？

Answer 1

变量 item 在 this.state.cards.map 之外，你需要创建 kebabDropdownItems 作为函数并将 item 作为参数传递。我的建议：

// create outside of render

function kebabDropdownItems(onClick) {
  return [
    <DropdownItem onClick={onClick} position="right">
      {" "}
      Delete
    </DropdownItem>
  ];
}

// change dropdownItems to

dropdownItems={kebabDropdownItems(this.deleteItem(item))}

Answer 2

当您像这样在Dropdown 组件中直接定义DropdownItem 组件时，它会起作用：

<Dropdown
  isPlain
  position="right"
  onSelect={e => this.onDropdownSelect(key, e)}
  toggle={
    <KebabToggle
      onToggle={isDropdownOpen =>
        this.onDropdownToggle(key, isDropdownOpen)
      }
    />
  }
  isOpen={this.state[key]}
  dropdownItems={[
    <DropdownItem
      onClick={this.deleteItem(item)}
      position="right"
    >
      {" "}
      Delete
    </DropdownItem>
  ]}
/>

查看完整的codesandbox