javascript - Cytoscape JS防止输入标签的onChange函数

我有一个可渲染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.

最佳答案

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

关于javascript - Cytoscape JS防止输入标签的onChange函数，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/57400299/