Question

我正在尝试使用reactjs和redux构建示例聊天室应用程序以用于学习目的。其中将有3个用户，其中Message_01组件被重复使用3次。下面你可以找到代码..

const Main = React.createClass({
  render() {
    return (
        <div className="parentContainer">
            <Message_01 className="messageComponent" message={this.props.message} user="Bob" onMessageRemove={this.props.removeMessage} />
            <Message_01 className="messageComponent" message={this.props.message} user="Kevin" onMessageRemove={this.props.removeMessage}  />
            <Message_01 className="messageComponent" message={this.props.message} user="Stuart" onMessageRemove={this.props.removeMessage} />
        </div>
    );
  }
});

Message_01.js：

const Message_01 = React.createClass({
    sendMessage() {
        var msg = this.refs.msg.value;

        this.props.onMessageSend(this.props.user, msg);
        this.refs.msg.value = '';
    },

    keypress(event) {
        if (event.keyCode == 13) this.sendMessage();
    },

    onDoubleClickEvent(index, msgID) {
        var removeIcon = $('#' + msgID).find('.glyphicon-remove');

        if (this.props.message[index].User == this.props.user) {
            if (removeIcon.css('display') == 'none')
                removeIcon.css('display', 'block');
            else
                removeIcon.css('display', 'none');
        } else {
            console.log('you cannot get remove icon');
        }
    },

    removeMessage(index) {
        this.props.onMessageRemove(index);
    },

    render() {
        return (
            <fieldset>
                <legend>{this.props.user}</legend>
                {this.props.message.map((msg, index) => {
                    return (
                        <div key={index}>
                            <div className="chatContainer">
                                <div className="msgArea" id={msg.ID} onDoubleClick={() => this.onDoubleClickEvent(index, msg.ID)}>
                                <b>{msg.User}: </b> {msg.Message} <span className="timeSpan">{msg.Time}</span> <span onClick={() => this.removeMessage(index)} style={{ display: 'none' }} className="glyphicon glyphicon-remove" />
                                </div>
                            </div>
                        </div>
                    )
                })}
                <div className="MessageTyper">
                    <input type="text" ref="msg" className="message_typer" onKeyDown={(event) => { this.keypress(event) }} />
                    <button className="send" onClick={this.sendMessage}> Send </button>
                </div>
            </fieldset>
        );
    }
});

代码是这样的，如果有的话会有三个消息容器，如下图所示

chat room app

根据代码如果用户双击消息实例，则删除图标将显示在相应消息组件的代码中给出的消息附近。但是，现在如果消息加倍，请单击第二个或第三个组件，删除图标将显示在第一个组件中（如下图所示）。这是错的。

Result of the app

如果我得到任何帮助，那将会更有帮助。提前谢谢。

Answer 1

这个问题是因为使用了错误的jquery选择器。我应该使用var removeIcon =$($('#'+user).find('#' + msgID)).find('.glyphicon-remove');加入var removeIcon = $('#' + msgID).find('.glyphicon-remove');。

Reactjs：重用组件会导致UI更改冲突

1 个答案: