React組件無法更新onClick事件處理程序

Question

我有一個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'));

Answer 1

您能否顯示在父級中渲染此子級組件的方式？ 我懷疑當您生成WordListItem的數組時，您沒有設置鍵屬性（或者使用簡單的索引作為鍵屬性，如果您也要刪除WordListItem的話，這是災難的秘訣，則該鍵必須是唯一的。

我也認為，如果該組件根本沒有狀態，而是在頂級父組件上具有狀態，然后將道具發送給子組件，則將更好。

編輯：

在您的word_list_item.jsx文件中，您需要react作為var React = require（'React / addons'）; 這只是您粘貼代碼時所做的錯字嗎？ 應為var React = require（'react / addons'），並使用小寫字母。 只是一個很小的觀察，不確定這是否與任何事情有關，但是可以肯定，您似乎遇到了某種瀏覽器問題。