onBlur setStateが動作しません（jsbin）

Question

私はデバッグに苦労しました。 jsbinには、エラーが何であるかを知る方法がありません。私の仲間のコンソールやコンソールを開いたときに、私のエラーが何であるかを明確に示すことはできません。

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

class HelloWorldComponent extends React.Component { 
    constructor() { 
    super() 
    this.getInput = this.focusHandler.bind(this) 
    this.state = {hasError:false} 
    } 
    focusHandler(e) { 
    if(e.target.value === ''){ 
     this.setState({hasError:true}) 
    } 
    } 
    render() { 
    return (  
     <input placeholder="username" type="text" onBlur={this.focusHandler}/> 
{this.state.hasError ? <span>Username is required</span> : ''} 
    ); 
    } 
} 

を反応させるデバッグするために、任意のより良い方法はありますか？私は、ユーザーが状態の入力ベースから離れるときにエラーメッセージを表示したいだけです。

Answer 1

は、ミスのこれらの種類を避けるために、同じ名前を使用しようと、私はあなたがusernameが空白でない場合falseに状態値をリセットする必要があると思う、このコードを試してみてください：

class HelloWorldComponent extends React.Component { 
    constructor() { 
    super() 
    this.focusHandler = this.focusHandler.bind(this) 
    this.state = {hasError:false} 
    } 
    focusHandler(e) { 
    this.setState({hasError: e.target.value != '' ? false : true}); 
    } 
    render() { 
    return ( 
     <div> 
     <input placeholder="username" type="text" onBlur={this.focusHandler}/> 
     {this.state.hasError ? <span>Username is required</span> : ''} 
     </div> 
    ); 
    } 
} 

作業例を確認してください：http://jsbin.com/cozenariqo/1/edit?html,js,console,output

Answer 2

まず、コンポーネント（または配列ですが、それほど一般的ではありません）からトップレベル要素を1つだけ返す必要があります。レンダリングされた出力を1つの要素にラップします。

render() { 
    return (
     <div> 
      <input placeholder="username" type="text" onBlur={this.focusHandler}/> 
      {this.state.hasError ? <span>Username is required</span> : ''} 
     </div> 
    ); 
} 

第2に、focusHandlerイベントを正しくバインドしていません。それをonBlur={this.focusHandler.bind(this)}に変更します。推奨読書：React, ES6, Autobinding, and createClass()

コードの読み込みをブロックするエラーは、折り返し要素からのものでした。 JS BinはBabelエラーをユーザーによく伝播しません。私はそれを使用せず、代わりにBabelとWebpackでローカル開発環境をセットアップすることをお勧めします。コンストラクタのメソッドを結合するたびに