Javascript Cytoscape js阻止输入标记的onChange函数

我有一个React容器来呈现一个cytoscape实例。在容器中，我还有一个模态组件，其中包含一个包含输入标记的滑块组件

问题是这个输入标记有一个永远不会被调用的onChange函数

有没有办法阻止cytoscape阻止输入标签上的侦听器

我尝试过修改模态组件的z索引，使其位于cytoscape之上，但仍然不起作用。我还尝试将eventlisteners转换为cytoscape：例如：

props.cy.removeAllListeners();
props.cy.userZoomingEnabled(false);
props.cy.userPanningEnabled(false);
props.cy.boxSelectionEnabled(false);
props.cy.panningEnabled(false);
props.cy.zoomingEnabled(false);
props.cy.autoungrabify(true);
props.cy.autounselectify(true);

我知道，如果我在锚标记中有一个onclick事件处理程序，它就会工作

此外，如果我手动移动模态的位置（使用控制台），使其不超过cytoscape实例，则其工作正常

以下是简化的父组件

class GraphContainer extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      showSettings: false,
    };
    this.cy = React.createRef();
    this.toggleSettings = this.toggleSettings.bind(this);
    this.setupCytoscape = this.setupCytoscape.bind(this);
    // and a bunch of other bindings
  }

  componentDidMount() {
    const container = ReactDOM.findDOMNode(this);
    this.cy = new cytoscape(
      {
        container, // container to render in
        style: stylesheet,
      },
    );

    this.setupCytoscape();
    this.loadData();
  }

// Function to hold all cy event listeners.
  setupCytoscape() {
    this.cy.on('dragfree', 'node', event => this.props.UpdateNodePosition(event.target));
    // and many more listeners
    };

  toggleSettings() {
    this.setState({ showSettings: !this.state.showSettings });
  }

render() {
    return (
      <div>
        {this.state.showSettings &&
        <GraphSettingsModal
          showSettings={this.state.showSettings}
          toggleSettings={this.toggleSettings}
          cy={this.cy}
          setupCy={this.setupCytoscape}
        />
        }
        <div className="ng-settings" onClick={e => this.toggleSettings(e)} >SETTINGS</div>
      </div>
    );
  }

类GraphContainer扩展了React.Component{ 建造师（道具）{ 超级（道具）； 此.state={ showSettings:false， }; this.cy=React.createRef（）； this.toggleSettings=this.toggleSettings.bind（this）； this.setupCytoscape=this.setupCytoscape.bind（this）； //还有一堆其他的绑定 } componentDidMount（）{ const container=ReactDOM.findDOMNode（this）； this.cy=新细胞景观( { 容器，//要在其中渲染的容器 样式：样式表， }, ); 这个.setupCytoscape（）； 这是loadData（）； } //函数来保存所有cy事件侦听器。 setupCytoscape（）{ this.cy.on（'dragfree'，'node'，event=>this.props.UpdateNodePosition（event.target））； //还有更多的听众 }; 切换设置（）{ this.setState（{showSettings:！this.state.showSettings}）； } render（）{ 返回( {this.state.showSettings&& } 这个.toggleSettings（e）}>SETTINGS ); } 这是子组件：

const GraphSettingsModal = (props) => {
  // Stateless version of componentDidMount().
  useEffect(() => {
    // remove all listeners, zooming and panning from parent cytoscape component.
    props.cy.removeAllListeners();
    props.cy.userZoomingEnabled(false);
    props.cy.userPanningEnabled(false);
    props.cy.boxSelectionEnabled(false);
    props.cy.panningEnabled(false);
    props.cy.zoomingEnabled(false);
    props.cy.autoungrabify(true);
    props.cy.autounselectify(true);
    // Put all listeners back and resume panning and zooming for parent cytoscape component.
    // Stateless version of componentWillUnmount().
    return () => {
      props.setupCy();
      props.cy.userZoomingEnabled(true);
      props.cy.userPanningEnabled(true);
      props.cy.boxSelectionEnabled(true);
      props.cy.panningEnabled(true);
      props.cy.zoomingEnabled(true);
      props.cy.autoungrabify(false);
      props.cy.autounselectify(false);
    };
  });

  return (
    <Modal
      className="ng-modal"
      toggle={props.toggleSettings}
      width={700}
      height={300}
      visible={props.showSettings}
    >
      <input
        id="test-slide"
        value={5}
        onChange={(e) => { console.log('onChange works'); }}
      />
    </Modal>
  );
};

I'm hoping to find a way to allow tags to exist on top of the cytoscape component and still properly listen to events.

const GraphSettingsModal=（道具）=>{
//componentDidMount（）的无状态版本。
useffect（（）=>{
//从父cytoscape组件中删除所有侦听器、缩放和平移。
props.cy.removeAllListeners（）；
props.cy.userZoomingEnabled（false）；
props.cy.userPanningEnabled（false）；
props.cy.boxSelectionEnabled（false）；
props.cy.panningEnabled（false）；
props.cy.zoomingEnabled（false）；
props.cy.autoungrabify（true）；
props.cy.autounselection（true）；
//将所有侦听器放回原处，然后继续对父cytoscape组件进行平移和缩放。
//componentWillUnmount（）的无状态版本。
return（）=>{
props.setupCy（）；
props.cy.userZoomingEnabled（true）；
props.cy.userPanningEnabled（true）；
props.cy.boxSelectionEnabled（true）；
props.cy.panningEnabled（true）；
props.cy.zoomingEnabled（true）；
props.cy.autoungrabify（false）；
props.cy.autounselection（false）；
};
});
返回(
{console.log（'onChange-works'）；}
/>
);
};
我希望找到一种方法，允许标记存在于cytoscape组件之上，并且仍然正确地侦听事件。

您的模式div似乎在graph div内而不是在它上面。

您的模式div似乎在graph div内而不是在它上面。

但是更改z索引不会有效地将其移动到顶部吗？不。在感兴趣的div内作为最上面的子div与位于div顶部不一样。因此要确认，您是说唯一可能的方法是让GraphSettingsModal存在于父div中而不是graph div中？但是更改z索引不会有效地将其移动到顶部吗？不。在感兴趣的div中作为最顶部的子div与位于div顶部并不相同。因此要确认，您是说唯一可能的方法是让GraphSettingsModal存在于父div而不是graph div中？