javascript - Why is getInitialState getting called again? -
i finding way react.js , having trouble figuring out why getinitialstate
being called once more expect. trying write component shows value label , can switched edit value presenting input text, ways save or cancel edit operation.
here's component:
var react = require('react'); var reactproptypes = react.proptypes; var enter_key_code = 13; var textinput = react.createclass({ proptypes: { id: reactproptypes.string, classname: reactproptypes.string, placeholder: reactproptypes.string, onsave: reactproptypes.func.isrequired, initialvalue: reactproptypes.string }, getinitialstate: function() { return { value: this.props.initialvalue, isediting: false }; }, render: function() { var inputfield = (<div> <input classname={this.props.classname} id={this.props.id} placeholder={this.props.placeholder} onblur={this._save} onchange={this._onchange} onkeydown={this._onkeydown} value={this.state.value} autofocus={true} /> <a onclick={this._save}>(s)</a> <a onclick={this._cancel}>(x)</a> </div>); var displayfield = (<div> <span>{this.state.value}</span> <a href='#' onclick={this._startedit}>(e)</a> </div>); return this.state.isediting ? inputfield : displayfield; }, _startedit: function() { this.setstate({ value: this.state.value, fallbackvalue: this.props.initialvalue, isediting: true }); }, _save: function() { this.props.onsave({ id: this.props.id, value: this.state.value }); this.setstate({ isediting: false }); }, _cancel: function() { this.setstate({ isediting: false, value: this.state.fallbackvalue }); }, _onchange: function(event) { this.setstate({ isediting: true, value: event.target.value, fallbackvalue: this.state.fallbackvalue }); }, _onkeydown: function(event) { if (event.keycode === enter_key_code) { this._save(); } } }); module.exports = textinput;
once press (e)dit, shortly see input box replaced again span - can see in debugger getinitialstate
gets called again, switching component non-edit state.
where thinking error, have expected getinitialstate
called once?
check out - http://jsbin.com/tixokayoke/1/ missing href in anchor tag causing issue you. without href page being re-requested , state being reset again.
Comments
Post a Comment