Cytoscape js阻止输入标签的onChange函数

Question

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

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

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

我尝试修改模态组件的 z-index 以使其位于 cytoscape 之上，但仍然无法正常工作。我还尝试将事件监听器转向 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>
    );
  }

这是子组件：

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.

Answer 1

您的模态 div 似乎在图表 div 内，而不是在它的顶部。