React.js：重用组件会导致UI更改冲突

Question

I am trying to build sample chat room application using reactjs and redux for learning purpose. In which there will be 3 user in which Message_01 component is reused for 3 times. below you can find the code..

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

The code is such way that if any there will be three message container as shown in below image

chat room app

As per the code If user double click the message instance then remove icon will get display near message as given in the code in respective message component. but, now if the message is doubled click in the 2nd or 3rd component the remove icon is display in the first component (as like in below image). Which is wrong.

Result of the app

it would be more helpful if i get any help for this. Thanks in advance.

Answer 1

This issue is because of using the wrong jquery selector. I should use, var removeIcon =$($('#'+user).find('#' + msgID)).find('.glyphicon-remove'); instend var removeIcon = $('#' + msgID).find('.glyphicon-remove'); .