[英]React component fails to update onClick event handler
我有一个react组件,代表一个单词表中的一行。 状态更改时,它会重新渲染,但不会更新onClick
事件处理程序。 我已经将组件缩减到最低限度,但仍然存在问题。 当我单击“编辑”链接时,控制台将打印“ onEdit”,并且在浏览器中状态看起来正确,但是当我单击“还原”时,控制台将再次打印“ onEdit”。 为什么状态更改后onClick
事件没有更新为使用_onRevert
函数? 为什么它仍然在第一次渲染过程中挂在旧的事件处理程序上? 谢谢。
var React = require('React/addons');
var WordListItem = React.createClass({
getInitialState: function(){
return {
isEditing: false,
english: this.props.word.english
};
},
_onEdit: function(e) {
e.preventDefault();
console.log('onEdit');
this.setState({isEditing: true});
},
_onRevert: function(e){
e.preventDefault();
console.log('onRevert');
this.setState({isEditing: false});
},
render: function() {
if(this.state.isEditing) {
return (
<div>
<span>Editing: {this.state.english} </span>
<a href="#" onClick={this._onRevert}>Revert</a>
</div>
)
} else {
return (
<div>
<span>Not Editing: {this.state.english} </span>
<a href="#" onClick={this._onEdit}>Edit</a>
</div>
)
}
}
})
module.exports = WordListItem;
下面更新
因此,事实证明,如果我将此组件粘贴到主app.jsx文件中,它将起作用,但是如果我使用require js将其包含进去,则它将不起作用。 这很奇怪,因为browserify可以正常工作,因为我仍然可以包含其他文件并组成嵌套的react组件,只是事件没有在某些元素上更新。 也许在这一点上,我应该提出一个新的问题,这个问题应更加集中。
var React = require('react/addons');
//var materialize = require('materialize-css');
var word = {id: 4671810846, english: "water", persian: "آب", phonetic: "aab", tags: ["noun","food","drink"]};
var WordListItem = require('./components/wordList/WordListItem.jsx');
// var WordListItem = React.createClass({
// getInitialState: function(){
// return {
// isEditing: false,
// english: this.props.word.english
// };
// },
// _onEdit: function(e) {
// e.preventDefault();
// console.log('onEdit');
// this.setState({isEditing: true});
// },
// _onRevert: function(e){
// e.preventDefault();
// console.log('onRevert');
// this.setState({isEditing: false});
// },
// render: function() {
// if(this.state.isEditing) {
// return (
// <div>
// <span>Editing: {this.state.english} </span>
// <a href="#" onClick={this._onRevert}>Revert</a>
// </div>
// )
// } else {
//
// return (
// <div>
// <span>Not Editing: {this.state.english} </span>
// <a href="#" onClick={this._onEdit}>Edit</a>
// </div>
// )
// }
//
// }
// })
React.render(<WordListItem word={word}/>, document.getElementById('app'));
您能否显示在父级中渲染此子级组件的方式? 我怀疑当您生成WordListItem的数组时,您没有设置键属性(或者使用简单的索引作为键属性,如果您也要删除WordListItem的话,这是灾难的秘诀,则该键必须是唯一的。
我也认为,如果该组件根本没有状态,而是在顶级父组件上具有状态,然后将道具发送给子组件,则将更好。
编辑:
在您的word_list_item.jsx文件中,您需要react作为var React = require('React / addons'); 这只是您粘贴代码时所做的错字吗? 应为var React = require('react / addons'),并使用小写字母。 只是一个很小的观察,不确定这是否与任何事情有关,但是可以肯定,您似乎遇到了某种浏览器问题。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.