CytoscapeJS appelant la fonction setState dans React

Question

J'essaie de faire un nodemap, visualisé avec cytoscapejs en réaction. Lorsque j'essaie d'exécuter le code suivant, j'obtiens l'erreur "this.handleTextChange n'est pas une fonction".
Est-il interdit d'appeler une fonction depuis un const? Il compile très bien, mais en cliquant sur un nœud, l'erreur se produit.

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>; 
    } 
} 

Existe-t-il un autre moyen de contourner ce problème sans définir d'état?

Answer 1

1) Vous n'avez pas besoin de lier componentDidMount à ceci. Ainsi, retirer le

suivant

this.componentDidMount = this.componentDidMount.bind(this);

2) utiliser la fonction de défilement pour lier lexicalement cela, la valeur de ce reste le même que le contexte dans lequel la fonction de flèche est définie. Alors, passez au

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

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

suivante En plus: La plupart des émetteurs (comme EventEmitter dans le nœud, les auditeurs jQuery ou Cytoscape) vont utiliser Function.apply() pour définir this dans le rappel à l'objet émetteur --- ce qui explique pourquoi (2) est nécessaire.