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

Question

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

return(

  <div>

    {this.state.majorDivisions.map((division) => {

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

    })}

  </div>)

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

Answer 1

当您将参数用大括号括起来时{division}，例如，您正在传入一个对象。ie: { upper: "upper" }和{ lower: "lower" }这被认为是在函数声明中创建对象的速记方法。只需移除花括号，单个division参数就会按预期传递给每个按钮。return(&nbsp; <div>&nbsp; &nbsp; {this.state.majorDivisions.map((division) => {&nbsp; &nbsp; &nbsp; return <button onClick = {this.renderDivisionRequirements.bind(null, division)}>{division}</button>&nbsp; &nbsp; })}&nbsp; </div>)此外，为了让事情更简洁，我建议您将其renderDivisionRequirements()转换为箭头函数，这样您就不必绑定this. 或者使用匿名函数在单击按钮时调用它。renderDivisionRequirements = () => {...renderDivisionRequirements logic}所以你的返回逻辑可以是return(&nbsp; <div>&nbsp; &nbsp; {this.state.majorDivisions.map((division) => {&nbsp; &nbsp; &nbsp; return <button onClick = {() => this.renderDivisionRequirements(division)}>{division}</button>&nbsp; &nbsp; })}&nbsp; </div>)