reactjs - "setState on undefined" this error trying to use es6 style react component in yahoo fluxible -


edit: mistake, webpack hotloader caching old js reason every time ran build. reset , rebuilt , seems working now.

i'm trying create simple searchbox using es6 style class declaration in yahoo fluxible react app. i'm working off todo example, converting es6 style syntax , i'm getting error on this.setstate in _onchange method. i've bound functions "this" in constructor i'm still getting error.

import react 'react'; import searchproducts '../actions/searchproducts';  const enter_key_code = 13;  class searchbox extends react.component {      static contexttypes = {         executeaction: react.proptypes.func.isrequired     };      static proptypes = {         text: react.proptypes.string     };      static defaultprops = {         text:''     };      constructor(props) {         super(props);         this.state = {             text: props.text         };         this._onchange = this._onchange.bind(this);         this._onkeydown = this._onkeydown.bind(this);     }      render() {         return (             <input                 classname="search-box"                 name="search-keyword"                 value={this.state.text}                 onchange={this._onchange}                 onkeydown={this._onkeydown}             />         );     }      _onchange(event, value) {         console.log( event.target.value);          //error here///////////////////////////////////////////////////         this.setstate({text: event.target.value});      }      _onkeydown(event) {         if (event.keycode === enter_key_code) {             event.preventdefault();             event.stoppropagation();              var text = this.state.text.trim();             if (text) {                 this.context.executeaction(searchproducts, {                     text: text                 });             }             this.setstate({text: ''});         }     }  }   export default searchbox; 

edit: disregard. missed part of constructor bound methods. hmm.. error message exactly?

have @ section 3 of this article refactoring react components es6 classes.

when using react.createclass({componentobjectliteral}) syntax, react binds object methods component instance, when _onchange method gets called input's onchange callback function, this keyword in _onchange method bound component.

react does not auto-bind methods you, have yourself. change jsx onchange={this._onchange.bind(this)}


Comments

Popular posts from this blog

javascript - Slick Slider width recalculation -

jsf - PrimeFaces Datatable - What is f:facet actually doing? -

angular2 services - Angular 2 RC 4 Http post not firing -