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

Question

我创建了以下设计：

这里是 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>
                       })}

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

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

Answer 1

解决方案似乎很简单。您直接在 onClick 中执行一个函数。这就是为什么他们都被处决了。您只需按如下方式更改 onClick：

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

Answer 2

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

{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>
  )
)}

Answer 3

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

  onclick=handler(1)

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

handler(id) => idofelement+id open

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

How to handle click on specific button in loop?

html

javascript

button

dom-events

reactjs