javascript - 为什么 getInitialState 再次被调用？

Question

我正在寻找进入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;

一旦我按下 (e)dit，我很快就会看到输入框再次被跨度替换 - 正如我在调试器中看到的 getInitialState 再次被调用，将组件切换回非编辑状态。

我的思维错误在哪里，因为我预计 getInitialState 只会被调用一次？

Answer 1

看看这个 - http://jsbin.com/tixokayoke/1/ anchor 标记中缺少 href 会导致您出现问题。如果没有 href，则会重新请求页面并再次重置状态。