如何使用一个键将相同的方法多次应用于不同的数组元素？

Question

我正在使用 React 中的卡片库。

每张卡片都需要有自己独特的状态和切换方法，目前由函数末尾的数字指定，例如onDropdownToggle1.

使用this.state.cards.map((product, key) => ( ...应用数组。

有没有办法使用函数名称中的键来明确地调用每个函数？比如直接修改函数名onDropdownToggle + {key}？还是以某种方式将密钥作为参数更好？

这是我沙箱的 link，它准确显示了正在发生的事情：https://codesandbox.io/s/weathered-worker-0y5vm

如有任何建议，我们将不胜感激。谢谢！

Answer 1

只需将密钥作为参数传递即可。要么像这样内联：

onToggle={(isDropdownOpen) => this.onDropdownToggle(key, isDropdownOpen)}

或者你可以像这样咖喱：

this.onDropdownToggle = key => isDropdownOpen => {
  ...
}

...

onToggle={this.onDropdownToggle(key)}

然后您可以使用单个处理程序来修改每张卡片。

设置状态

时，您必须使用计算的属性名称

this.setState({
  [key]: isDropdownOpen
});

最终结果：

// One toggle function that uses the key to update state
this.onDropdownToggle = (key, isDropdownOpen) => {
  this.setState({
    [key]: isDropdownOpen
  });
};

// One dropdown select function that uses the key to update state
this.onDropdownSelect = (key, event) => {
  this.setState({
    [key]: !this.state[key]
  });
};

...


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

您也可以考虑使用 item.name 而不是传递给函数的键。但前提是它们始终是唯一的。

如何使用一个键将相同的方法多次应用于不同的数组元素？

How to apply the same method multiple times to different array elements using a key?

javascript

arrays

toggle

reactjs