Javascript 为什么getInitialState再次被调用？

我正在找到进入react.js的方法，并且很难弄清楚为什么

getInitialState

被调用的次数比我预期的要多。我正在尝试编写一个组件，该组件将某些值显示为标签，可以通过显示输入文本以及保存或取消编辑操作的方式切换到编辑该值

以下是组件：

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;

var React=require（'React'）；
var ReactPropTypes=React.PropTypes；
var ENTER_KEY_CODE=13；
var TextInput=React.createClass({
道具类型：{
id:ReactPropTypes.string，
类名：ReactPropTypes.string，
占位符：ReactPropTypes.string，
onSave:ReactPropTypes.func.isRequired，
initialValue:ReactPropTypes.string
},
getInitialState:函数（）{
返回{
value:this.props.initialValue，
i编辑：错误
};
},
render:function（）{
变量输入字段=
(
);
返回this.state.isEditing？inputField:displayField；
},
_startEdit:function（）{
这是我的国家({
value:this.state.value，
fallBackValue:this.props.initialValue，
我编辑：对
});
},
_保存：函数（）{
this.props.onSave（{id:this.props.id，value:this.state.value}）；
这是我的国家({
i编辑：错误
});
},
_取消：函数（）{
这是我的国家({
i编辑：错，
值：this.state.fallBackValue
});
},
_onChange：函数（事件）{
这是我的国家({
我编辑：是的，
值：event.target.value，
fallBackValue:this.state.fallBackValue
});
},
_onKeyDown：函数（事件）{
如果（event.keyCode===输入\u键\u码）{
这个；
}
}
});
module.exports=文本输入；

一旦我按下（e）dit，我很快就会看到输入框再次被span替换——正如我在调试器

getInitialState

中看到的那样，再次被调用，将组件切换回非编辑状态

---

我的思考错误在哪里，因为我希望

getInitialState

只被调用一次？

请检查这一点-锚标记中缺少的href为您造成了问题。如果没有href，将重新请求页面，并再次重置状态。

True！我想我会做一个小复制。诚然，没有href的a是愚蠢的，但是结果是非常奇怪的。