Question

我最近开始在主干上使用reactjs。我搜索并找到Dan Abramov的回答here。我一直在成功使用他的mixin，直到我开始使用嵌套组件。

假设我有一个user模型如下

{
  id: 1,
  name: "John Doe",
  email: "john@doe.com"
}

以及users集合

我的反应代码如下

var EditableContent = React.createClass({
    getInitialState: function() {
        return {
            editing: false,
            value: this.props.value,
            temp: this.props.value
        };
    },
    editValue: function() {
        this.setState({editing: true})
    },
    valueChanged: function() {
        var newVal = this.refs.text.getDOMNode().value;
        this.setState({temp: newVal});
    },
    valueUpdated: function() {
        var oldVal = this.state.value,
            newVal = this.refs.text.getDOMNode().value;
        this.setState({
            value: newVal,
            editing: false
        });
        if (this.props.onUpdate) this.props.onUpdate(newVal, oldVal);
    },
    abortEdit: function() {
        var oldVal = this.state.value;
        this.setState({
            value: oldVal,
            temp: oldVal,
            editing: false
        });
    },
    render: function() {
        if (this.state.editing) {
            return(
                <span className={"form-inline"}>
                    <input type="text" className="form-control" ref="text" value={this.state.temp} onChange={this.valueChanged} />
                    <button className={"btn btn-success"} onClick={this.valueUpdated}>
                        <i className={"fa fa-check"}></i>
                    </button>
                    <button className={"btn btn-danger"} onClick={this.abortEdit}>
                        <i className={"fa fa-close"}></i>
                    </button>
                </span>
            );
        } else {
            return (
                <span>{this.state.value}
                    <button className={"btn btn-warning"} onClick={this.editValue}>
                        <i className={"fa fa-pencil"}></i>
                    </button>
                </span>
            );
        }
    }
});

var UserRow = React.createClass({
    mixins: [BackboneMixin],
    getBackboneState: function(props) {
        return {
            user: props.user.toJSON()
        };
    },
    watchBackboneProps:function(props, listenTo){
        listenTo(props.user, 'change');
    },
    emailUpdate:function(email) {
        this.props.user.set('email', email, {silent:true});
    },
    render: function() {
        return (
            <tr>
                <td>{this.state.user.name}</td>
                <td><EditableContent value={this.state.user.email} onUpdate={this.emailUpdate}/></td>
            </tr>
        );
    }
});

var UserTable = React.createClass({
    mixins: [BackboneMixin],
    getBackboneState: function(props) {
        return {
            users: props.users.toJSON()
        };
    },
    watchBackboneProps:function(props, listenTo) {
        listenTo(props.users, 'add remove change reset');
    },
    componentDidMount: function() {
        /**$.get('/api/users.php'), function(data){
            this.props.users.add(data);
        }.bind(this));**/
        this.props.users.add([
            {
                "id": 1,
                "name": "Idona Reese",
                "email": "vehicula.risus@semperpretiumneque.org"
            },{
                "id": 2,
                "name": "Norman Santana",
                "email": "ut.mi.Duis@Cumsociisnatoque.edu"
            },{
                "id": 3,
                "name": "Colt Fulton",
                "email": "mauris.id@ultrices.edu"
            }
        ]);
    },
    render: function() {
        return (
            <table className={"table"}>
                <thead>
                    <tr>
                        <th>Username</th>
                        <th>Email</th>
                    </tr>
                </thead>
                <tbody>
                    {this.state.users.map(function(elem){
                        return <UserRow key={elem.id} user={this.props.users.get(elem.id)} />
                    }, this)}
                </tbody>
            </table>
        )
    }
});

React.render(<UserTable users={users} />, document.getElementById('main'))

我不断获得Uncaught Error: Listener already exists.

我已经得出结论，这是因为嵌套组件，因为当我从UserRow删除mixin并使用getInitialState时，一切正常。

从视图到模型的数据正确更新，但反之亦然。任何帮助将不胜感激。

提前致谢！

Answer 1

问题在您的代码中是额外的!。我不知道它来自哪里，因为我没有它在mixin中。

原始代码：

_unbindBackboneEvents: function () {
  if (!_.isFunction(this.watchBackboneProps)) {
    return;
  }

你小提琴的代码：

_unbindBackboneEvents: function() {
  if (!!_.isFunction(this.watchBackboneProps)) {
    return;
  }

如果您将!!修改为!，则会有效。

React + Backbone嵌套组件

1 个答案: