Этот объект в React Component с использованием классов ES6

Question

У меня есть компонент MsgInput с textarea, который onKeyUp запускает функцию обработчика. Внутри функции обработчика я пытаюсь читать реквизиты с помощью this.props, но не уверен, почему здесь реквизит не определен. Конечно, workaroud должен использовать .

export class MsgInput extends React.Component { 
    constructor(props) { 
     super(props); 
    } 

    inputHandler(e) { 
    if(e.keyCode == 13 && !e.shiftKey) { 
     this.props.onNewMessage({content: e.target.value}); 
     e.target.value = ''; 
     e.preventDefault(); 
    } 
    } 

    render() { 
    return (
     <div className="controls"> 
      <textarea onKeyDown={this.inputHandler.bind(this)} className="msg-input" placeholder="Write something" disabled={!this.props.auth}></textarea> 
     </div> 
    ); 
    } 
} 

Answer 1

React с классами ES6 не автоматически связывать ваши обратные вызовы к экземпляру компонента, так что вы должны сделать это сами, как вы уже сделали. Иначе this не будет доступен в обратном вызове.

---

this.inputHandler.bind(this) 

Это не работа вокруг, но так оно и должно быть.

Другой альтернативой является использование функций стрелок ES6, которые автоматически связывают this.

<textarea onKeyDown={(e) => this.inputHandler(e)}></textarea> 

---

Оговорка: Использование функции .bind или стрелки внутри вашего JSX создаст новую функцию на каждом рендеринг, который является препятствием производительности.

В качестве последнего средства вы можете связать методы в своем конструкторе, которые не имеют нарушения производительности стрелок.

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