React: ¿Eliminar el detector de eventos utilizado con bind en la sintaxis de ES6?

Creado en 9 feb. 2016  ·  3Comentarios  ·  Fuente: facebook/react

Estoy tratando de comunicarme con un iframe con la API de postMessage pero tengo un problema con la administración de eventListeners en ES6

Se indica en los documentos que

Con React, cada método está vinculado automáticamente a su instancia de componente (excepto cuando se usa la sintaxis de clase ES6)

El problema es que this.handler.bind(this) !== this.handler así que cuando termine con el evento no puedo eliminar el oyente porque no puedo mantener una referencia al controlador. Podría intentar encapsular la función, pero la función de encapsulación también necesitaría un enlace. También podría intentar super el constructor, pero no estoy seguro de que sea una buena idea, además no sé los argumentos que necesita. Estoy bastante seguro de que me estoy perdiendo un punto importante aquí.

¡Cualquier ayuda será muy apreciada!

export default class SomeComponent extends Component {

  handleIframeData(event) {
    // some stuff in there that will need 'this' to be set to the component's context, to get props for example.
  }

  componentDidMount() {
    window.addEventListener('message', this.handleIframeData.bind(this), false)
  }

  componentWillUnmount() {
    // won't work because 'this.handleIframeData.bind(this) !== this.handleIframeData'
    window.removeEventListener('message', this.handleIframeData, false)
  }

  render() {
    return (
      <div className="SomeComponent" style={{height: '100%', width:'100%', display: 'table'}}>
        <iframe src="assets/iframe/index.html" style={{display: 'table-row', width: '100%', height:'100%', border: 0}}></iframe>
      </div>
    )
  }
}

Gracias de cualquier manera !

Question

Comentario más útil

El rastreador de problemas es para errores con React, no para soporte general. Use Stack Overflow o IRC para eso.

Dicho esto, la solución genérica a este problema es mantener una referencia al controlador enlazado. Por ejemplo, puede vincular el método en el constructor:

constructor(props) {
  super(props);
  this.handleIframeData = this.handleIframeData.bind(this);
}

Consulte también la publicación del blog que introdujo las clases: https://facebook.github.io/react/blog/2015/01/27/react-v0.13.0-beta-1.html#autobinding .

Todos 3 comentarios

El rastreador de problemas es para errores con React, no para soporte general. Use Stack Overflow o IRC para eso.

Dicho esto, la solución genérica a este problema es mantener una referencia al controlador enlazado. Por ejemplo, puede vincular el método en el constructor:

constructor(props) {
  super(props);
  this.handleIframeData = this.handleIframeData.bind(this);
}

Consulte también la publicación del blog que introdujo las clases: https://facebook.github.io/react/blog/2015/01/27/react-v0.13.0-beta-1.html#autobinding .

@fkling Eso es exactamente lo que iba a decir: P. Corregir en todos los puntos. ¡Gracias!

Sry por eso, gracias de nuevo!

¿Fue útil esta página
0 / 5 - 0 calificaciones