React: Π£Π΄Π°Π»ΠΈΡ‚ΡŒ ΠΏΡ€ΠΎΡΠ»ΡƒΡˆΠΈΠ²Π°Ρ‚Π΅Π»ΡŒ событий, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΡ‹ΠΉ с привязкой Π² ​​синтаксисС ES6?

Π‘ΠΎΠ·Π΄Π°Π½Π½Ρ‹ΠΉ Π½Π° 9 Ρ„Π΅Π²Ρ€. 2016  Β·  3ΠšΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΈ  Β·  Π˜ΡΡ‚ΠΎΡ‡Π½ΠΈΠΊ: facebook/react

Π― ΠΏΡ‹Ρ‚Π°ΡŽΡΡŒ ΡΠ²ΡΠ·Π°Ρ‚ΡŒΡΡ с iframe с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ API postMessage, Π½ΠΎ Ρƒ мСня ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠ° с ΡƒΠΏΡ€Π°Π²Π»Π΅Π½ΠΈΠ΅ΠΌ eventListeners Π² ES6

Π’ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°Ρ†ΠΈΠΈ ΡƒΠΊΠ°Π·Π°Π½ΠΎ, Ρ‡Ρ‚ΠΎ

Π’ React ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ ΠΌΠ΅Ρ‚ΠΎΠ΄ автоматичСски привязываСтся ΠΊ экзСмпляру Π΅Π³ΠΎ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π° (ΠΊΡ€ΠΎΠΌΠ΅ случаСв использования синтаксиса класса ES6)

ΠŸΡ€ΠΎΠ±Π»Π΅ΠΌΠ° Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ this.handler.bind(this) !== this.handler поэтому, ΠΊΠΎΠ³Π΄Π° я Π·Π°ΠΊΠΎΠ½Ρ‡Ρƒ с событиСм, я Π½Π΅ ΠΌΠΎΠ³Ρƒ ΡƒΠ΄Π°Π»ΠΈΡ‚ΡŒ ΡΠ»ΡƒΡˆΠ°Ρ‚Π΅Π»Ρ, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ я Π½Π΅ ΠΌΠΎΠ³Ρƒ ΡΠΎΡ…Ρ€Π°Π½ΠΈΡ‚ΡŒ ссылку Π½Π° ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊ. Π― ΠΌΠΎΠ³ Π±Ρ‹ ΠΏΠΎΠΏΡ‹Ρ‚Π°Ρ‚ΡŒΡΡ ΠΈΠ½ΠΊΠ°ΠΏΡΡƒΠ»ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΡŽ, Π½ΠΎ для ΠΈΠ½ΠΊΠ°ΠΏΡΡƒΠ»ΠΈΡ€ΡƒΡŽΡ‰Π΅ΠΉ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ Ρ‚Π°ΠΊΠΆΠ΅ потрСбуСтся привязка. Π― ΠΌΠΎΠ³ Π±Ρ‹ ΠΏΠΎΠΏΡ€ΠΎΠ±ΠΎΠ²Π°Ρ‚ΡŒ супСрконструктор, Π½ΠΎ я Π½Π΅ ΡƒΠ²Π΅Ρ€Π΅Π½, Ρ‡Ρ‚ΠΎ это Ρ…ΠΎΡ€ΠΎΡˆΠ°Ρ идСя, плюс я Π½Π΅ знаю, ΠΊΠ°ΠΊΠΈΠ΅ Π°Ρ€Π³ΡƒΠΌΠ΅Π½Ρ‚Ρ‹ Π΅ΠΌΡƒ Π½ΡƒΠΆΠ½Ρ‹. Π― ΡΠΎΠ²Π΅Ρ€ΡˆΠ΅Π½Π½ΠΎ ΡƒΠ²Π΅Ρ€Π΅Π½, Ρ‡Ρ‚ΠΎ ΡƒΠΏΡƒΡΠΊΠ°ΡŽ Π²Π°ΠΆΠ½Ρ‹ΠΉ ΠΌΠΎΠΌΠ΅Π½Ρ‚.

Π›ΡŽΠ±Π°Ρ ΠΏΠΎΠΌΠΎΡ‰ΡŒ привСтствуСтся !

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

Бпасибо, Π² любом случаС !

Π‘Π°ΠΌΡ‹ΠΉ ΠΏΠΎΠ»Π΅Π·Π½Ρ‹ΠΉ ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ

БистСма отслСТивания ошибок ΠΏΡ€Π΅Π΄Π½Π°Π·Π½Π°Ρ‡Π΅Π½Π° для обнаруТСния ошибок Π² React, Π° Π½Π΅ для ΠΎΠ±Ρ‰Π΅ΠΉ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠΈ. Для этого ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ Stack Overflow ΠΈΠ»ΠΈ IRC.

ΠŸΡ€ΠΈ этом ΠΎΠ±Ρ‰Π΅Π΅ Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ этой ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡ‹ - ΡΠΎΡ…Ρ€Π°Π½ΠΈΡ‚ΡŒ ссылку Π½Π° привязанный ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊ. НапримСр, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΡ€ΠΈΠ²ΡΠ·Π°Ρ‚ΡŒ ΠΌΠ΅Ρ‚ΠΎΠ΄ Π² конструкторС:

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

Π‘ΠΌ. Π’Π°ΠΊΠΆΠ΅ сообщСниС Π² Π±Π»ΠΎΠ³Π΅, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ прСдставлСны классы: https://facebook.github.io/react/blog/2015/01/27/react-v0.13.0-beta-1.html#autobinding .

ВсС 3 ΠšΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ

БистСма отслСТивания ошибок ΠΏΡ€Π΅Π΄Π½Π°Π·Π½Π°Ρ‡Π΅Π½Π° для обнаруТСния ошибок Π² React, Π° Π½Π΅ для ΠΎΠ±Ρ‰Π΅ΠΉ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠΈ. Для этого ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ Stack Overflow ΠΈΠ»ΠΈ IRC.

ΠŸΡ€ΠΈ этом ΠΎΠ±Ρ‰Π΅Π΅ Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ этой ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡ‹ - ΡΠΎΡ…Ρ€Π°Π½ΠΈΡ‚ΡŒ ссылку Π½Π° привязанный ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊ. НапримСр, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΡ€ΠΈΠ²ΡΠ·Π°Ρ‚ΡŒ ΠΌΠ΅Ρ‚ΠΎΠ΄ Π² конструкторС:

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

Π‘ΠΌ. Π’Π°ΠΊΠΆΠ΅ сообщСниС Π² Π±Π»ΠΎΠ³Π΅, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ прСдставлСны классы: https://facebook.github.io/react/blog/2015/01/27/react-v0.13.0-beta-1.html#autobinding .

@fkling Π­Ρ‚ΠΎ ΠΈΠΌΠ΅Π½Π½ΠΎ Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ я собирался ΡΠΊΠ°Π·Π°Ρ‚ΡŒ: P. Π’Π΅Ρ€Π½ΠΎ ΠΏΠΎ всСм ΠΏΡƒΠ½ΠΊΡ‚Π°ΠΌ. Благодаря!

Π˜Π·Π²ΠΈΠ½ΠΈΡ‚Π΅ Π·Π° это, Π΅Ρ‰Π΅ Ρ€Π°Π· спасибо!

Π‘Ρ‹Π»Π° Π»ΠΈ эта страница ΠΏΠΎΠ»Π΅Π·Π½ΠΎΠΉ?
0 / 5 - 0 Ρ€Π΅ΠΉΡ‚ΠΈΠ½Π³ΠΈ