Question

我正在一个必须显示图形的项目中。因此，我决定为此目的使用vis.js。 react-vis-network是一个自定义组件，用于响应使用vis.js。现在，我像通常那样努力地附加事件处理程序。您可以在this section处找到提示，但我不知道如何正确管理。

在手动使用vis.js和react的尝试中，我将附加事件处理程序，如下所示：

componentDidMount() {
    this.network = new Network(this.appRef.current, this.state.data, this.state.options);
    this.network.on("stabilizationIterationsDone",  () => {
        this.network.setOptions( { physics: false } );
        console.log(this.network.getSeed());
    });
}

我在react-vis-network的Network.js

中发现了以下代码段

...
const eventPattern = /^on([A-Z])(.*)$/;
...
Object.keys(this.props)
      .filter(prop => prop.match(eventPattern))
      .forEach(prop => {
        const event = prop.replace(
          eventPattern,
          (match, p1, rest) => p1.toLowerCase() + rest
        );
        // Props controlled by developer
        // eslint-disable-next-line security/detect-object-injection
        this.network.on(event, this.props[prop]);
     });
     ...

但是我不知道如何提供例如：

this.network.on("stabilizationIterationsDone",  () => {
        this.network.setOptions( { physics: false } );
        console.log(this.network.getSeed());
    });

希望您能给我一个提示。

更新：我认为它必须类似于以下内容。但这还行不通。

...
const props = {};
    props.onStabilizationIterationsDone = function(){console.log("test")};
....
return (
    <div id='network'>
    <Network props={props}>

Answer 1

事件模式正在寻找以'on'开头且后跟大写字母A-Z的道具。像组件期望的那样设置道具的格式：

<Network onStabilizationIterationsDone={this.handleStabilizationIterationsDone} />

如何在自定义React组件中附加事件处理程序

1 个答案: