反应，事件的功能很少

Question

有脚本 - 在onMouseOver事件期间，在onMouseOut期间图片增加 - 减少。同样在onMouseOver发生z-index的变化（从0到10），增加的图片在其他人之上。 https://jsfiddle.net/Nata_Hamster/k089ysxw/

但是在onMouseOver期间设置z-index的更改是错误的决定，因为在onMouseOut期间z-index变为0.我看到下一个deсision - 通过单独的函数更改z-index，例如，悬停，并将它添加到两者事件。

但我做错了 - 意外的令牌

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

编辑

看着你的小提琴，似乎你错误地调用了这些方法。这会解决它：

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)}</pre>
        </div>
      </div>
    );
  }
}