反応入力要素の "ReferenceError：getInputが定義されていません"

Question

class HelloWorldComponent extends React.Component { 
    constructor() { 
    super() 
    this.getInput = this.getInput.bind(this) 
    } 
    getInput() { 
    alert('focused'); 
    } 
    render() { 
    return (  
     <input type="text" onFocus={getInput}/>  
    ); 
    } 
} 

ReactDOM.render(
    <HelloWorldComponent/>, 
    document.getElementById('react_example') 
); 

このコードで何が問題になっていますか？警告を発することができない、私はgetInputが定義されていないエラーを持っている。

http://jsbin.com/qoduyawaci/1/edit

Answer 1

あなたは正しいrefferenceを追加するのを忘れ。 this.getInput getInputの代わりにを使用してください。この

class HelloWorldComponent extends React.Component { 
    constructor() { 
    super() 
    this.getInput = this.getInput.bind(this); 
    } 
    getInput() { 
    alert('focused'); 
    } 
    render() { 
    return (  
     <input type="text" onFocus={this.getInput}/>  
    ); 
    } 
} 

ReactDOM.render(
    <HelloWorldComponent/>, 
    document.getElementById('react_example') 
); 

Answer 2

よう

あなたは、関数を呼び出すことthis.getInput代わりに使用this.getInputhttp://jsbin.com/nehadisuvu/1/edit?html,js,output

Answer 3

getInputのを使用する必要があります。 また、矢印 を ES6で使用すると、バインディングを避けることができます。

getInput =() => { 
    alert('focused'); 
} 

、あなたは、コンストラクタで

this.getInput = this.getInput.bind(this) 

を回避することができます。これは正しいES6方法です。

http://jsbin.com/sebotirito/1/edit?html,js,output