React: Remover ouvinte de evento usado com vinculação na sintaxe ES6?

Criado em 9 fev. 2016  ·  3Comentários  ·  Fonte: facebook/react

Estou tentando me comunicar com um iframe com a API postMessage, mas tenho um problema com o gerenciamento de eventListeners no ES6

É declarado nos documentos que

Com React, cada método é automaticamente vinculado à sua instância de componente (exceto ao usar a sintaxe de classe ES6)

O problema é que this.handler.bind(this) !== this.handler então, quando terminar o evento, não posso remover o ouvinte porque não consigo manter uma referência ao manipulador. Eu poderia tentar encapsular a função, mas a função de encapsulamento também precisaria de uma ligação. Eu poderia tentar fazer o super construtor também, mas não tenho certeza se isso é uma boa ideia, além de não sei os argumentos necessários. Tenho certeza de que estou perdendo um ponto importante aqui.

Qualquer ajuda seria muito 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>
    )
  }
}

Obrigado mesmo assim!

Question

Comentários muito úteis

O rastreador de problemas é para bugs com React, não para suporte geral. Use Stack Overflow ou IRC para isso.

Dito isso, a solução genérica para esse problema é manter uma referência ao manipulador vinculado. Por exemplo, você pode vincular o método no construtor:

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

Consulte também a postagem do blog que introduziu as classes: https://facebook.github.io/react/blog/2015/01/27/react-v0.13.0-beta-1.html#autobinding .

Todos 3 comentários

O rastreador de problemas é para bugs com React, não para suporte geral. Use Stack Overflow ou IRC para isso.

Dito isso, a solução genérica para esse problema é manter uma referência ao manipulador vinculado. Por exemplo, você pode vincular o método no construtor:

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

Consulte também a postagem do blog que introduziu as classes: https://facebook.github.io/react/blog/2015/01/27/react-v0.13.0-beta-1.html#autobinding .

@fkling Isso é exatamente o que eu ia dizer: P. Correto em todos os pontos. Obrigado!

Sry por isso, obrigado novamente!

Esta página foi útil?
0 / 5 - 0 avaliações