在数组映射的最后一个元素上自动触发单击事件处理程序。反应答案

【问题标题】：Auto trigger click event handler on last element of array map. Reactjs在数组映射的最后一个元素上自动触发单击事件处理程序。反应
【发布时间】：2018-04-04 21:00:14
【问题描述】：

我在反应渲染中映射一个数组。渲染了多个 DOM。

每个 DOM 都绑定了一个点击事件处理程序。其中显示了一些点击细节。

我想触发对该数组最后一个元素的自动点击，并将该事件传递给 clickHandler。

{
    historyData.map((heading, index) => {
        return(
            <div className="history-node-container" key={index}>
              //This is where click handler is being called.
              <div className="history-node" onClick={(e) => {this.handleHistoryClick(e)}}>
                <span className="history-title">{heading.action}</span>
                <input type="hidden" value={heading.comment} className="comment-hidden" />
                <input type="hidden" value={heading.by} className="comment-by-hidden" />
                <input type="hidden" value={heading.role} className="comment-role-hidden" />
                <input type="hidden" value={heading.added_at} className="comment-added-hidden" />
                <span className="history-date">{moment(heading.added_at).format("MMMM Do, YYYY")}</span>
              </div>
            </div>
        )
    })
}

而clickHandler代码为：

handleHistoryClick(event){
      event.stopPropagation();
      //Some Code To Display Information Using "event"
}

现在我想做的是如果在映射中元素是最后一个我想触发自动点击并相应地显示它的信息。

我将如何做到这一点？

【问题讨论】：

查看stackoverflow.com/questions/42550341/…
@ShubhamKhatri，我的问题与你提到的问题太不同了。
你的问题是获取对最后一个元素的引用。为什么不能为所有这些添加一个 ref，在你的情况下 ref 将是一个数组并且只访问最后一个。并在其上触发事件，您可以参考上述问题
在下方查看我的答案

标签： javascript jquery arrays reactjs

【解决方案1】：

map 函数有第三个参数，它是调用 map 的原始数组。您可以使用它来确定这是否是最后一个。

{
historyData.map((heading, index, array) => {
  if(index===array.length-1){
    //do something
  }
  return(...)

【讨论】：

找出最后一个元素并自动触发该元素的事件。自动触发呢？
我想知道你想在事件处理程序中做什么。特别是，如果您不需要使用回调参数“事件”，则可以直接在 if 块中调用它。或使用hannad-rehman 的建议。此外，在自动触发后，您是否希望用户进一步点击最后一个元素

【解决方案2】：

这可能不是最好的答案，但可以解决问题

 {
        historyData.map((heading, index,originalArr) => {
            return(
                <div className="history-node-container" key={index}>
                  //This is where click handler is being called.
                  <div className="history-node" onClick={ (index==originalArr.length-1)?this.handleHistoryClick(e) : (e) => {this.handleHistoryClick(e)}}>
                    <span className="history-title">{heading.action}</span>
                    <input type="hidden" value={heading.comment} className="comment-hidden" />
                    <input type="hidden" value={heading.by} className="comment-by-hidden" />
                    <input type="hidden" value={heading.role} className="comment-role-hidden" />
                    <input type="hidden" value={heading.added_at} className="comment-added-hidden" />
                    <span className="history-date">{moment(heading.added_at).format("MMMM Do, YYYY")}</span>
                  </div>
                </div>
            )
        })
    }

这可以解决问题。您想检查当前迭代是否是最后一次迭代。如果它是最后一次迭代。直接调用函数。

onClick={ (index==originalArr.length-1) ? this.handleHistoryClick(e) : (e) => {this.handleHistoryClick(e)}}

【讨论】：

【解决方案3】：

在地图参数中添加数组：

historyData.map(heading, index, array)

并在您的 onClick 中添加一个条件：

onClick={
 (e) => {
    (index==array.length-1) ? 
       (this.handleHistoryClick(e, true)) : 
       (this.handleHistoryClick(e, false))
  }
}

并在您的处理函数中添加一个条件：

handleHistoryClick(event, isLastElement){
      event.stopPropagation();
      if(isLastElement){
         // do somthing
      }else{
         // do somthing else
      }
}

【讨论】：

【解决方案4】：

除了在render 方法中渲染之外，永远不应该做任何事情，尤其是像事件触发器这样的东西。 render 必须是纯的。

话说，能做的就是……

首先将引用存储到变量中的最后一个元素。
触发componentDidMount中的点击事件。

示例代码 -

{
    historyData.map((heading, index) => {
        return(
            <div className="history-node-container" key={index}>
              // store every item in `this.lastOne`, it will point to the
              // last item at the end of `map` call.
              <div className="history-node" ref={item => this.lastOne = item} onClick={(e) => {this.handleHistoryClick(e)}}>
                <span className="history-title">{heading.action}</span>
                <input type="hidden" value={heading.comment} className="comment-hidden" />
                <input type="hidden" value={heading.by} className="comment-by-hidden" />
                <input type="hidden" value={heading.role} className="comment-role-hidden" />
                <input type="hidden" value={heading.added_at} className="comment-added-hidden" />
                <span className="history-date">{moment(heading.added_at).format("MMMM Do, YYYY")}</span>
              </div>
            </div>
        )
    })
}

然后在componentDidMount -

componentDidMount(){
    if (this.lastOne) {
        this.lastOne.click();
    }
}

如果您想在组件后续更新时执行点击处理程序，请将类似代码放入componentDidUpdate。

【讨论】：