我正在尝试使用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>
);
}
});
代码是这样的,如果有的话会有三个消息容器,如下图所示
根据代码如果用户双击消息实例,则删除图标将显示在相应消息组件的代码中给出的消息附近。但是,现在如果消息加倍,请单击第二个或第三个组件,删除图标将显示在第一个组件中(如下图所示)。这是错的。
如果我得到任何帮助,那将会更有帮助。提前谢谢。答案 0 :(得分:0)
这个问题是因为使用了错误的jquery选择器。
我应该使用var removeIcon =$($('#'+user).find('#' + msgID)).find('.glyphicon-remove');
加入var removeIcon = $('#' + msgID).find('.glyphicon-remove');
。