Правильный способ доступа к рефлектору реагировать?

Question

Без использования привязки this.say к этому на кнопке пример не работает. Однако я не уверен, что это правильно или имеет какие-либо побочные эффекты.

class Speak extends React.Component { 
 

 
    render() { 
 
     return (
 
      <div> 
 
       <input ref={(c) => this._input = c} defaultValue="Hello World!"/> 
 
       <button onClick={this.say.bind(this) }>Say</button> 
 
      </div> 
 
     ); 
 
    } 
 

 
    say() { 
 
     if (this._input !== null) { 
 
      alert(this._input.value); 
 
     } 
 
    } 
 
}; 
 

 
ReactDOM.render(<Speak />, document.getElementById('App'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 

 
<div id="App" />

Answer 1

Похоже, это требуется при использовании классов ES6: See: Autobinding

Только разница выше пример связывает метод в конструкторе

Answer 2

вы можете использовать функции массива и забыть о добавление .bind(this)
проверка работы pen

class Speak extends React.Component { 
    render() { 
     return (
      <div> 
       <input type='text' ref='greeting'/> 
       <button onClick={this.say}>Say</button> 
      </div> 
     ); 
    } 

    say =() => { 
     const { value } = this.refs.greeting; 
     alert(value); 
     return value; 
    }; 
}; 

ReactDOM.render(<Speak />, document.getElementById('App'));