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/锚标记中缺少的href导致问题。如果没有href，则会重新请求页面并再次重置状态。

为什么再次调用getInitialState？

1 个答案: