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

Question

我有一个 react 组件，它代表单词表中的一行。当状态更改时它会重新呈现，但不会更新 onClick 事件处理程序。我已将组件精简到最低限度，但问题仍然存在。当我单击“编辑”链接时，控制台会打印“onEdit”，并且状态在浏览器中看起来似乎正确，但当我单击“恢复”时，控制台会再次打印“onEdit”。为什么状态更改后 onClick 事件没有更新为使用 _onRevert 函数？为什么它仍然卡在第一个渲染 channel 的旧事件处理程序上？谢谢。

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，则这将导致灾难，键必须是唯一的。

此外，我认为如果这个组件根本没有状态，而是在顶部父组件上有状态并将 Prop 发送给子组件，那么它会更好。

编辑:

在你的word_list_item.jsx文件中，你需要react as var React = require('React/addons');这只是您粘贴代码时犯的错字吗？它应该是小写字母的 var React = require('react/addons') 。只是一个小小的观察，不确定这是否与任何事情有关，但肯定看起来您遇到了某种 browserify 问题。