Реагировать, несколько функций для события

Question

Есть скрипт - во время события onMouseOver картинка увеличивается, во время onMouseOut - уменьшается. Также во время onMouseOver происходит изменение z-индекса (от 0 до 10), чтобы увеличенная картинка лежала поверх остальных. https://jsfiddle.net/Nata_Hamster/k089ysxw/

Но это неправильное решение устанавливать изменение z-индекса во время onMouseOver, потому что во время onMouseOut z-индекс становится 0. Я вижу следующее решение - изменить z-индекс отдельной функцией, например, hover, и добавить ее функция для обоих событий.

Но я что-то не так делаю - неожиданный токен

onMouseOver={(this, id)=>{this.increase.bind; this.hover.bind}}

https://jsfiddle.net/Nata_Hamster/knrw67py/ Как правильно добавить две функции к одному событию?

Answer 1

Вы не можете использовать this в качестве имени аргумента, это зарезервированное слово. Вам не нужно его использовать, хотя функции стрелок автоматически связывают this с окружающим контекстом. Таким образом, снятие этого сделает вашу функцию работоспособной:

onMouseOver={(id)=>{this.increase.bind; this.hover.bind}}

EDIT

Глядя на свою скрипку, кажется, что вы вызываете методы неправильно. Это исправит это:

<code>class Article extends React.Component {
  // Rest of your component ommitted for brevity

  render() {
    const TipStyle = {
      marginBottom: "10px"
    };

    return (
      <div style={TipStyle}>
        <h2 style={{ marginBottom: "1px" }}>{this.props.name}</h2>
        <div>
          {[1, 2, 3].map(id => {
            return (
              <img
                style={this.getImgStyle(id)}
                src={this.props[`img${id}`]}
                onMouseOver={() => {
                  this.increase(id);
                  this.hover(id);
                }}
                onMouseOut={() => {
                  this.increase(id);
                }}
              />
            );
          })}
          <pre>{JSON.stringify(this.state)}

); } }