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' });
  }

相关反应/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>

---

这是将值存储为

数据-*

属性的用例之一

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

clickHandler (e) {
    this.props.dispatch({type: 'updateMenuFave', current: e.target.getAttribute('data-value') });
  }

clickHandler（e）{
this.props.dispatch（{type:'updatenumfave'，current:e.target.getAttribute（'data-value'））}）；
}

重用处理程序：

  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>

---

您可以阅读有关bind的更多信息。

最好的方法是将它们提取到子组件中。它有点冗长，但它使事情更干净，并将防止不必要的重新渲染

class ArcImg extends Component {
  handleClick = () => {
    this.props.onImageClick(this.props.current);
  }

  render() {
    const {
      onImageClick,
      ...otherProps
    } = this.props;

    return (
      <img
        className="arcs"
        onClick={this.handleClick}
        {...otherProps}
      />
    )
  }
}

类ArcImg扩展组件{
handleClick=（）=>{
this.props.onImageClick（this.props.current）；
}
render（）{
常数{
点击图像，
…其他道具
}=这是道具；
返回(

重用处理程序：

// you should bind this.clickHandler in the constructor or use property initializer
<div id="arc_hold">
  <ArcImg
    id="arc_arc"
    src="../_images/arc_arc.svg"
    onImageClick={this.clickHandler}
  />
  <ArcImg
    id="arc_news"
    src="../_images/arc_news.svg"
    onImageClick={this.clickHandler}
  />
  <ArcImg
    id="arc_sw"
    src="../_images/arc_sw.svg"
    onImageClick={this.clickHandler}
  />
</div>

JSX:

this.clickHandler（'1'）}>
this.clickHandler（'280'）}>
this.clickHandler（'268'）}>

所以传入参数…React中单击处理程序的参数列表是什么？永远不要使用React将数据存储在DOM中。这就是使用React的意义！！成功了，我只需将一个

toString（）

添加到current。

  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('1')} ></img>
   <img className='arcs' id="arc_news" src="../_images/arc_news.svg" 
    onClick={() => this.clickHandler('280')} ></img>
   <img className='arcs' id="arc_sw" src="../_images/arc_sw.svg" 
    onClick={() => this.clickHandler('268')} ></img>
  </div>