爲什麼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）編輯，我馬上就會看到輸入框只有由跨度更換一次 - 我可以在調試器getInitialState看到被再次呼籲，將組件切換回非編輯狀態。

我的思維錯誤在哪裏，因爲我期望getInitialState只能被調用一次？

Answer 1

檢查了這一點 - http://jsbin.com/tixokayoke/1/錨標記中缺失的href正在爲您造成問題。沒有href頁面正在被重新請求，並且狀態被重新設置。