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
Post a Comment