реагировать 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> : ''} 
    ); 
    } 
} 

Любой лучший способ отладки реагировать? Я просто хочу показать сообщение об ошибке msg, если пользователь уйдет из входной базы в состоянии.

Answer 1

Всякий раз, когда связывание методов в конструкторе, попробуйте использовать то же имя, чтобы избежать подобных ошибок, я думаю, что вам нужно сбросить значение состояния в false если username не является пустым, попробуйте этот код:

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

Прежде всего, вы должны вернуть только один элемент верхнего уровня из компонента (или массива, но это менее распространено). Оберните воспроизведенной выходной в одном элементе:

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

Во-вторых, вы не правильно связывать событие focusHandler. Измените его на onBlur={this.focusHandler.bind(this)}. Рекомендуемое чтение: React, ES6, Autobinding, and createClass()

Ошибка, связанная с загрузкой кода из элемента упаковки. JS Bin не хорошо передает ошибки Babel пользователю. Я бы предложил не использовать его и вместо этого создать локальную среду разработки с Babel и Webpack.