Question

如何将这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>

Answer 1

重用处理程序：

  <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>

绑定参数：

{{1}}

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

Answer 2

这是将值存储为data-*属性的用例之一。

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

Answer 3

最好的方法是将这些提取到子组件中。它有点冗长，但它可以使事情变得更清晰，并且可以防止不必要的重新渲染。

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}
      />
    )
  }
}

// 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>

Answer 4

重用处理程序：

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

JSX：

  <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>

有没有办法让这3个事件有一个事件？

4 个答案: