Есть ли способ иметь одного организатора событий для этих 3 событий?

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

Повторно использовать обработчик:

  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>

Вы можете прочитать больше о связывании в документации MDN.

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

Повторное использование обработчика:

  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>

Answer 4

Лучший способ сделать это - извлечь их из подкомпонентов. Это немного более многословно, но это делает вещи чище и предотвратит ненужные повторные рендеры.

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>