点击掉接口获取数据，避免多次调用（react)

最新推荐文章于 2025-06-25 02:53:18 发布

原创最新推荐文章于 2025-06-25 02:53:18 发布 · 1.4k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#react

js 同时被 2 个专栏收录

43 篇文章

订阅专栏

react

26 篇文章

订阅专栏

本文探讨了在React项目中如何优化点击事件的处理方式，通过添加和移除事件监听器，避免不必要的多次调用，提升应用性能。特别关注了下拉框点击事件的控制逻辑，确保在数据加载完成后正确响应用户交互。

点击掉接口获取数据，避免多次调用（react)

addEvent = () => {
  document.addEventListener('click', this.handleAdd)
}
removeEvent = () => {
  document.removeEventListener('click', this.handleAdd)
}
handleContent = (e) => {
  e.nativeEvent.stopImmediatePropagation()
}
// 对于项目等下拉框点击事件的控制
handleClick = () => {
  const { loading, onClick, costList, placeholder } = this.props
  if (loading) {
    return
  } else {
    // 当获取到数据以后，就不在触发点击事件，项目除外，因为项目是根据部门和人有关系，部门和人改变以后点击事件需要再次被触发
    if (!costList || costList.length === 0 || placeholder === '请选择项目') {
      console.log(99999999,'shjahsdhkas')
      onClick && onClick()
    }
  }
  let { visible } = this.state
  this.setState({
    visible: !visible
  })
  if (visible) {
    this.removeEvent()
  } else {
    this.addEvent()
  }
}