javascript - 有没有办法为这3个事件提供一个事件处理程序？

如何将这3个事件处理程序合并为1个？我的动作只有一个与众不同。

  clickHandler1 () {
    this.props.dispatch({type: 'updateMenuFave', current: '1' });
  }
  clickHandler2 () {
    this.props.dispatch({type: 'updateMenuFave', current: '280' });
  }
  clickHandler3 () {
    this.props.dispatch({type: 'updateMenuFave', current: '268' });
  }

相关的React / JSX

  <div id = 'arc_hold'>
    <img className='arcs' id="arc_arc" src="../_images/arc_arc.svg" onClick={this.clickHandler1.bind(this)} ></img>
    <img className='arcs' id="arc_news" src="../_images/arc_news.svg" onClick={this.clickHandler2.bind(this)} ></img>
    <img className='arcs' id="arc_sw" src="../_images/arc_sw.svg" onClick={this.clickHandler3.bind(this)} ></img>
  </div>

最佳答案

重用处理程序：

  clickHandler(current) {
    this.props.dispatch({type: 'updateMenuFave', current: current });
  }

并绑定参数：

  <div id = 'arc_hold'>
    <img className='arcs' id="arc_arc" src="../_images/arc_arc.svg" onClick={this.clickHandler.bind(this, '1')} ></img>
    <img className='arcs' id="arc_news" src="../_images/arc_news.svg" onClick={this.clickHandler.bind(this, '280')} ></img>
    <img className='arcs' id="arc_sw" src="../_images/arc_sw.svg" onClick={this.clickHandler.bind(this, '268')} ></img>
  </div>

您可以阅读有关绑定at the MDN documentation的更多信息。