React组件无法更新onClick事件处理程序

时间:2015-05-26 00:20:35

标签: javascript onclick requirejs reactjs

我有一个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包含它,则不行。这很奇怪,因为浏览器工作正常,因为我仍然可以包含其他文件并组成嵌套的反应组件,只是事件不会在某些元素上得到更新。也许在这一点上我应该问一个更有针对性的新问题。

    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'));

1 个答案:

答案 0 :(得分:1)

您能否展示在父级中呈现此子组件的方式?我怀疑当你生成一个WordListItem数组时,你没有设置一个关键属性(或使用一个简单的索引作为关键属性,如果你也删除了WordListItem,这是一个灾难的秘诀。 ,关键必须是独一无二的。

此外,我认为如果它根本没有状态,那么这个组件会更好,而是在顶级父组件上设置状态并向子项发送道具。

编辑:

在你的word_list_item.jsx文件中,你需要做出反应,因为var React = require(&#39; React / addons&#39;);这只是你粘贴代码时犯的错误吗?它应该是var React = require(&#39; react / addons&#39;)和小写字母。只是一个小小的观察,不确定这是否与任何事情有关,但确定看起来你有某种浏览器问题。