Javascript 在React中为数组中的每个项创建按钮时，如何根据数组值传入唯一的onClick参数？

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

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

返回(
{this.state.majorDivisions.map（（分部）=>{
返回{division}
})}
)

---

我的代码成功地创建了两个按钮[lower]和[upper]，但是onClick参数{division}显示为类对象。

当您将参数用大括号括起来（如

{division}

）时，您传递的是一个对象<代码>即：{upper:“upper”}和

{lower:“lower”}

这被认为是在函数声明中创建对象的一种简捷方法

只需去掉大括号，单个

除法

参数将按预期传递给每个按钮

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

所以你的返回逻辑可以是

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

返回(
{this.state.majorDivisions.map（（分部）=>{
返回此.rendervisionrequirements（division）}>{division}
})}
)

可能的话，请发布部门的样本数据。事实上，您正在将除法作为对象传递，如

{division}

，请删除大括号，然后再试一次。哇，我想我已经尝试过了，但现在效果非常好！谢谢你的解释和建议。@quinndarling21，非常欢迎你！很高兴这对你有帮助。

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