如何将参数传递给自定义事件侦听器并防止 reactjs 中的默认值？

Question

我必须将一些参数传递给事件处理程序并且需要阻止默认事件。如何做到这一点？通过 reactjs onMouseUp 我们可以传递参数，但现在由于被动事件不能阻止默认（例如：event.preventDefault();）但是在自定义事件侦听器的情况下我们可以阻止默认但不能传递参数。任何解决方案都将是可观的。这是我的代码。

componentDidMount() {
    this.svgNode.current.addEventListener("mouseUp", this.mouseUpHandler, {
      passive: false,
    });
  }
mouseUpHandler(someParam, event) {
  event.preventDefault();
}

render() {
  let someParam = "somevalue";
  return () {
    <svg ref={this.svgNode} onMouseUp={this.mouseUpHandler.bind(this, someParam)} >
    /*some child nodes */
    </svg>
  }
}

注意：默认事件侦听器中的 event.preventDefault() 将导致错误，因为目标将被视为被动

Answer 1

您可以使用 addEventHandler 并使用自定义参数传递已绑定的事件处理程序，例如：

App.js

import React, { Component } from "react";
import "./styles.css";

export default class App extends Component {
  svgNode;
  someParam = "somevalue";

  constructor(props) {
    super(props);
    this.svgNode = React.createRef();
    // if you need to access dynamic value use this
    this.mouseUpHandler = this.mouseUpHandler.bind(this, () => this.someParam);

    // uncomment if you need to access static value, which will not be modified, you can pass it directly
    // this.mouseUpHandler = this.mouseUpHandler.bind(this, this.someParam);
  }

  componentDidMount() {
    this.svgNode.current.addEventListener("mouseup", this.mouseUpHandler, {
      passive: false
    });
  }

  componentWillUnmount() {
    this.svgNode.current.removeEventListener("mouseup", this.mouseUpHandler);
  }

  mouseUpHandler(someParam, event) {
    console.log(someParam, event);
    event.preventDefault();
  }

  render() {
    return (
      <svg ref={this.svgNode}>
        <circle
          cx="50"
          cy="50"
          r="40"
          stroke="green"
          strokeWidth="4"
          fill="yellow"
        />
      </svg>
    );
  }
}

看看this codesandbox。

Answer 2

有很多方法可以处理反应事件侦听器。

对于你的情况，我会在 ReatJS 中使用 SyntheticEvent。

...

const mouseUpHandler = (event, parameter) => {
  event.preventDefault();
  console.log(parameter);
}

render() {
  let someParam = "somevalue";
  return () {
    <svg onMouseEnter={(e) => mouseUpHandler(e, 'print this')} >
    /*some child nodes */
    </svg>
  }
}

...

请注意，onMouseEnter 和 onMouseLeave 事件从离开的元素传播到进入的元素，而不是普通的冒泡，并且没有捕获阶段，具体映射不是 public API 并可能随时更改。

所以阅读下面的文章会帮助你进一步解决问题

Answer 3

您可以简单地将箭头函数传递给 svg 组件，例如：

<svg 
  ref={this.svgNode} 
  onMouseUp={(event) => this.mouseUpHandler(event, someParam)}
>
  /*some child nodes */
</svg>

那么您的事件处理程序将如下所示：

mouseUpHandler(event, someParam) {
  event.preventDefault();
}

如何将参数传递给自定义事件侦听器并防止 reactjs 中的默认值？

How to pass parameters to custom event listener and prevent default in reactjs?

parameter-passing

event-handling

preventdefault

reactjs