Come gestire eventi Bootstrap speciali in React?

Question

Nel dritto fino jQuery, posso fare qualcosa di simile

$('#myCollapsible').on('click', 'hidden.bs.collapse', function() { 
    // do something… 
}) 

ma c'è un modo "giusto" per farlo in Reagire? Se quanto sopra è la strada da percorrere, dove dovrei posizionare quel gestore di eventi? Si prega di notare che io sono non utilizzando il plugin react-bootstrap.

Answer 1

Il modo giusto per gestire gli eventi non direttamente supportate da React è aggiungendo un ascoltatore evento al nodo DOM dopo monti componenti, e la rimozione quando le disattivazioni componenti:

class MyCollapsible extends React.Component { 
 
    constructor() { 
 
    super() 
 
    // Bind the method in the constructor instead of binding it in render, so you only do it once 
 
    this.handleHiddenBsCollapse = this.handleHiddenBsCollapse.bind(this) 
 
    } 
 

 
    componentDidMount() { 
 
    this.myCollapsible.addEventListener('hidden.bs.collapse', this.handleHiddenBsCollapse) 
 
    } 
 

 
    componentWillUnmount() { 
 
    this.myCollapsible.removeEventListener('hidden.bs.collapse', this.handleHiddenBsCollapse) 
 
    } 
 

 
    handleHiddenBsCollapse(event) { 
 
    // Do something... 
 
    } 
 

 
    render() { 
 
    // Settings refs with node => this.bla = node is recommended 
 
    // because this.refs is deprecated. 
 
    // in this example "node" is the DOM node itself, not a react reference 
 
    return (
 
     <div ref={node => (this.myCollapsible = node)} /> 
 
    ) 
 
    } 
 
}

Documentazione per l'utilizzo di riferimenti DOM: https://facebook.github.io/react/docs/refs-and-the-dom.html