Question

我正在为每个字符串和一个数组创建按钮（即majorDivisions = [“ upper”，“ lower”]）。我需要每个按钮都具有一个onClick函数，其参数等于唯一值（即“上”或“下”），具体取决于用于创建按钮的值。它正在创建正确的按钮，但是对于调用函数而言，参数不是字符串，而是某些类对象。

# running python in the terminal
import requests

r = requests.get('http://google.com')
# runs like a charm

我的代码成功创建了[下]和[上]两个按钮，但是onClick参数{division}出现为类对象。

Answer 1

当您将参数用{division}之类的花括号括起来时，您正在传入一个对象。 ie: { upper: "upper" }和{ lower: "lower" }

这被认为是在函数声明内创建对象的简便方法。

只需除去花括号，各个division参数将按预期传递给每个按钮。

return(
  <div>
    {this.state.majorDivisions.map((division) => {
      return <button onClick = {this.renderDivisionRequirements.bind(null, division)}>{division}</button>
    })}
  </div>)

此外，为了使内容更简洁，我建议将renderDivisionRequirements()变成箭头功能，这样就不必绑定this。或使用匿名函数在单击按钮时调用它。

renderDivisionRequirements = () => {
...renderDivisionRequirements logic
}

所以您的返回逻辑可以只是

return(
  <div>
    {this.state.majorDivisions.map((division) => {
      return <button onClick = {() => this.renderDivisionRequirements(division)}>{division}</button>
    })}
  </div>)

在React中为数组中的每个项目创建按钮时，如何基于数组值传递唯一的onClick参数？

1 个答案: