gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-03 11:16:22 25 4
gpt4 key购买 nike

我正在寻找进入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 只会被调用一次?

最佳答案

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

关于javascript - 为什么 getInitialState 再次被调用?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27326215/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com