javascript - 状态转换后可以注册点击监听器吗？

Question

我有一个如下所示的组件:

<div ref='carousel' onClick={this.mobileZoomOut()} className='carousel'>

mobileZoomout 应该注册一个仅适用于小屏幕的特殊条件:

  mobileZoomOut () {
    const elem = this.state.zoom.carousel
    if (this.zoomed('carousel') && elem.scale < 1.1) {
      this.setState({zoom: {}})
    }
  }

常规缩放的注册方式如下:

this.flky = new Flickity('.carousel', flickityOptions)
this.flky.on('staticClick', (e) => {
  if (this.zoomed()) {
    this.setState({ zoom: {} })
  } else {
    this.zoomIn('carousel', 0.774, 0)
    this.zoomIn('thumbs', 0.208, 0.774)
  }
})

staticClick 是图像 slider flickity 的自定义事件，在移动设备上放大时会被禁用。这就是为什么我需要在移动设备上进行另一个缩小事件。

添加 mobileZoomOut 时出现此错误，我相信原因是轮播上的 click 事件注册了这两个事件，我不希望在 staticClick 事件之后注册 onClick完成了。

Warning: setState(...): Cannot update during an existing state transition (such as within `render` or another component's constructor). Render methods should be a pure function of props and state; constructor side-effects are an anti-pattern, but can be moved to `componentWillMount`.

我尝试用 onMouseDown/onMouseUp 替换 onClick，但没有帮助。我想我可以通过超时来做到这一点，但我想避免这种情况，而且我不太确定如何做到。

Answer 1

您不是将函数作为 prop 传递，而是执行它并传递其返回值。
foo()执行 foo 函数。不过，您希望它在事件触发时执行。

这应该可以解决问题。
<div ref='carousel' onClick={this.mobileZoomOut} className='carousel'>