React Component中的這個對象使用ES6類

我有一個MsgInput組件，其中textarea這onKeyUp觸發一個處理函數。裏面的處理函數，我嘗試閱讀使用this.props道具，但不知道爲什麼道具在這裏不確定的。當然workaroud是使用。React Component中的這個對象使用ES6類

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

來源

2016-12-01 Faiz Halde

的可能的複製[未定義不是對象評價this.state/this.props]（http://stackoverflow.com/questions/40774399/undefined-is-not-an-object-evaluating-this -state-這個道具） – Pineda

如果您使用的是反正變換，檢查了'@ autobind'裝飾：https://www.npmjs.com/package/core-decorators#autobind –

與ES6類陣營不會自動您的回調綁定到組件實例，所以你必須做你自己，你已經做了。否則this在回調中不可用。

this.inputHandler.bind(this)

這不是一個解決辦法，但它的方式應該是。

另一種替代方法是利用這將自動綁定this ES6箭頭功能。

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

警告：使用您的JSX內.bind或箭頭功能將創建一個新的功能，在每一個渲染這是一種性能障礙。

正如你可以綁定在你的構造方法，它不會有箭頭的功能性能損失的最後手段。

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

來源

2016-12-01 12:30:51 lustoykov

加上一個箭頭的功能。綁定的電話似乎有些乏味到我 –

好的，謝謝;-)可以接受的答案，如果它清除的東西了。 – lustoykov

爲什麼要在每個渲染上創建一個新函數？我寧願在構造函數裏面加入'.bind'。 –

React Component中的這個對象使用ES6類

回答

相關問題