Reactjs CytoscapeJS在React中调用setState函数

我正在尝试制作一个节点映射，在react中用cytoscapejs可视化。 当尝试运行以下代码时，我得到错误this.handleTextChange不是一个函数。 不允许从常量中调用函数吗？它编译得很好，但单击节点时会发生错误

import React from 'react';
const cytoscape = require( 'cytoscape' );
const cycola = require( 'cytoscape-cola' );

cytoscape.use( cycola );

export class NodeBox extends React.Component {
    constructor( props ) {
        super( props );
        this.componentDidMount = this.componentDidMount.bind( this );
        this.state = {
         description: ''
      }

      this.handleTextChange = this.handleTextChange.bind(this);

    }
    handleTextChange(text){
      this.setState({description: text});
    }

    componentDidMount() {

        const cy = cytoscape( {

            container: document.getElementById( 'cy' ),
            boxSelectionEnabled: false,
            elements: this.props.elements[0],
            style: cytoscape.stylesheet()
              .selector('node')
                .css({
                  'label': 'data(name)',
                  'width':'data(size)',
                  'height':'data(size)',
                  'border-width':'3',
                  'border-color': '#618b25',
                  'background-fit':'cover',
                  'background-image': 'data(img)'

                })

              .selector('edge')
                .css({
                  'curve-style': 'unbundled-bezier',
                  'control-point-distance': '20px',
                  'control-point-weight': '0.5', // '0': curve towards source node, '1': towards target node.
                  'width': 1, //
                  'line-color': '#618B25',
                  'target-arrow-color': '#618B25',
                  'target-arrow-shape': 'triangle'
                })


          },
          'layout':{
            'name': 'cola', 'maxSimulationTime': 0
          }

      );

      cy.panningEnabled( false );

      cy.on('tap', 'node', function(evt){
          var node = evt.target;
          if (node.id() !== 1){
            console.log(node.data('description'));

            this.handleTextChange(node.data('description'));
          }
        });
      cy.panningEnabled( false );
    }
    render() {
        return <div> <div style ={{'height':300, 'width':'100%'}} id="cy"> </div><h1 id="desc" style={{textAlign:"center"}}>{this.state.description}</h1></div>;
    }
}

---

有没有其他方法可以在不设置状态的情况下解决此问题？

1您不需要将componentDidMount绑定到此。因此，删除以下内容

this.componentDidMount=this.componentDidMount.bind this

2使用arrow函数对其进行词汇绑定，其值与定义arrow函数的上下文保持相同。因此，请改为以下内容

cy.on('tap', 'node',(evt) => {
      var node = evt.target;
      if (node.id() !== 1){
        console.log(node.data('description'));

        this.handleTextChange(node.data('description'));
      }
});

旁白：大多数发射器（如节点中的EventEmitter、jQuery侦听器或Cytoscape）将使用Function.apply在发射器对象的回调中设置此函数，这就是为什么需要2的原因。

您永远不需要绑定componentDidMount。同时，发生了一个错误，哪一个？