如何处理点击循环中的特定按钮？答案

【问题标题】：How to handle click on specific button in loop?如何处理点击循环中的特定按钮？
【发布时间】：2021-02-25 04:55:22
【问题描述】：

我创建了以下设计：

这里是 react js 代码：

 {this.props.BetSlipDataObj.betDetails.data.map(
                (value, index) => {
                <div className="d-flex justify-content-end">
                          <button
                            className="info-button"
                            data-toggle="collapse"
                            href="#collapseExample"
                            role="button"
                            aria-expanded="false"
                            aria-controls="collapseExample"
                            // onClick={
                            //   value.betId != null
                            //     ? _this.getBetIdDetails(value.betId)
                            //     : value.childId != null
                            //     ? _this.getBetIdDetails(value.childId)
                            //     : ""
                            // }
                          >
                       </div>
                       })}

在这里我正在尝试执行以下任务如果我单击一个按钮，它应该会展开该框但是，如果我单击一个按钮，所有框都会展开。如果我在点击时调用某个方法，它会被无限调用

有人可以帮我更正代码吗？

【问题讨论】：

标签： javascript html reactjs button dom-events

【解决方案1】：

您可以在单击按钮时调用函数。我认为它是无限调用的，因为您没有传递对该函数的引用。

{this.props.BetSlipDataObj.betDetails.data.map(
  (value, index) => (
    <div className="d-flex justify-content-end" key={index}>
      <button
        className="info-button"
        data-toggle="collapse"
        href="#collapseExample"
        role="button"
        aria-expanded="false"
        aria-controls="collapseExample"
        onClick={
          value.betId != null
            ? () => _this.getBetIdDetails(value.betId)
            : value.childId != null
            ? () => _this.getBetIdDetails(value.childId)
            : () => {}
        }
      >
    </div>
  )
)}

您还缺少 div 上的 key 属性

编辑：一个按钮可以打开所有框，因为它们都具有相同的 ID 和控件。要使 ID 和控件唯一，您可以执行以下操作：

{this.props.BetSlipDataObj.betDetails.data.map(
  (value, index) => (
    <div className="d-flex justify-content-end" key={index}>
      <button
        className="info-button"
        data-toggle={`collapse${index}`}
        href={`#collapseExample${index}`}
        role="button"
        aria-expanded="false"
        aria-controls={`collapseExample${index}`}
        onClick={
          value.betId != null
            ? () => _this.getBetIdDetails(value.betId)
            : value.childId != null
            ? () => _this.getBetIdDetails(value.childId)
            : () => {}
        }
      >
    </div>
  )
)}

【讨论】：

谢谢安什。现在没有无限调用，但仍然单击一个按钮，所有其他框也在扩展。你能分享一下有什么问题吗？我认为部分需要修改data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample" 我尝试使用索引但它不起作用。
我已经更新了答案，也许这会解决你的目的。

【解决方案2】：

解决方案似乎很简单。您直接在 onClick 中执行一个函数。这就是为什么他们都被处决的原因。你只需要改变 onClick 如下：

onClick = { ()  => {
    if(value.betId != null){
     _this.getBetIdDetails(value.betId)
} else if (value.childId != null){
     _this.getBetIdDetails(value.childId)
} else {return ""} }

【讨论】：

【解决方案3】：

您需要为每个 div 提供唯一的 id，可能是该行的主键，当单击该按钮时，将 id 传递给打开函数，并将其附加到该 div 的 id 以打开。希望能帮助到你。这将是这样的：-

  onclick=handler(1)

div id 应该是这样的：- open1, open2 处理程序应该是这样的：-

handler(id) => idofelement+id open

【讨论】：