javascript - 我可以设置尚未定义的 onClick 事件吗？

Question

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

const ProductCarousel = React.createClass({
  componentDidMount: function () {
    this.flky = new Flickity('.carousel', flickityOptions)
    //here
  },
  render: function () {
    const item = this.props.item
    return (
      <div>
        <div className='carousel'>
          {item.get('images').map((url, i) => (
            <img key={i.toString()} src={stripUrl(url)} width={520} />
          ))}
        </div>
        <div style={{marginTop: '20px', display: 'flex'}}>
          {item.get('images').map((url, index) =>
            <div style={{flexGrow: 1, margin: '0 1em 0 1em'}} className='hidden-xs' key={url}>
              <Thumbnail src={stripUrl(url)} />
            </div>
          )}
        </div>
      </div>
    )
  }
})

在“这里”的地方，我想为 <Thumbnail onClick /> 定义函数。这些函数是 this.flky 的方法，所以我无法在 componentDidMount 之前创建它们，但我想将它们设置在缩略图中并将缩略图索引传递给它们。我可以使用类似 promise 之类的东西吗？

Answer 1

如果你把它放在一个函数中，它不会被执行，直到它被点击，此时方法应该存在:

 <Thumbnail src={stripUrl(url)} onClick={()=>this.flky.someMethod(index)} />