如何使用 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

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

// 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

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

How to call a function in render() using a parameter that's defined in return()

javascript

function

onclick

reactjs

react-props