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

Popular posts from this blog

python - mat is not a numerical tuple : openCV error -

c# - MSAA finds controls UI Automation doesn't -

wordpress - .htaccess: RewriteRule: bad flag delimiters -