Question

有脚本-在onMouseOver事件期间，图片会增加 onMouseOut-减少。同样在onMouseOver期间发生z索引更改（从0到10），以增加图片位于其他图片之上。 https://jsfiddle.net/Nata_Hamster/k089ysxw/

但是在onMouseOver期间设置z-index的更改是错误的决定，因为在onMouseOut期间z-index变为0。我看到了下一个决定-通过单独的功能（例如，将鼠标悬停并添加）来更改z-index对两个事件都起作用。

但是我做错了-意外令牌

class ViewController: UIViewController, UNUserNotificationCenterDelegate {
    override func viewDidLoad() {
        super.viewDidLoad()
        //...
        UNUserNotificationCenter.current().delegate = self
    }

    func userNotificationCenter(_ center: UNUserNotificationCenter, willPresent notification: UNNotification, withCompletionHandler completionHandler: @escaping (UNNotificationPresentationOptions) -> Void) {
        completionHandler([.alert, .sound])
    }
}

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

反应，事件的功能很少

1 个答案: