我有一个带有React的Meteor应用程序,其中有一个名为ChatManager
的组件。该组件导入了我的chatrooms.js
API,用于发布我的chatrooms
集合。它还导入我的EditChatRoom
组件和我的ChatRoomRecord
组件。
基本上,这里是有关代码的文件结构的摘要:
-imports
-api
-chatrooms.js
-ui
-chatmanager
-ChatRoomRecord.jsx
-EditChatRoom.jsx
ChatManager.jsx
我的
ChatRoomRecord
组件具有onClick
功能,该功能可以成功记录点击和chatroom
道具。我的
EditChatRoom
是modal
,其中id="editChatRoomModal"
ChatManager
组件是同时包含ChatRoomRecord
和EditChatRoom
组件的组件。如何将已注册的
chatroom
道具发送到EditChatRoom
组件?另外,我该如何使用React打开editChatRoomModal
?非常感谢帮助!谢谢!
编辑:添加信息
这是我的
ChatManager
组件的基本表示形式:class ChatManager extends Component {
renderChatRoomRecords() {
return this.props.chatrooms.map((chatroom) => (
<ChatRoomRecord key={chatrooom._id} chatroom={chatroom} />
))
}
render() {
return (
<div>
<EditChatRoom />
<table>
<tbody>
{this.renderChatRoomRecords()}
</tbody>
</table>
</div>
)
}
}
ChatManager.PropTypes = {
chatrooms: PropTypes.array.isRequired
}
export default createContainer(() => {
Meteor.subscribe('chatrooms')
return { chatrooms: ChatRooms.find({}).fetch() }
}, ChatManager)
这是我的
ChatRoomRecord
组件:export class ChatRoomRecord extends Component {
constructor(props) {
super(props)
this.handleClick = this.handleClick.bind(this)
}
handleClick(event) {
event.preventDefault()
console.log("Click registered successfully: " + this.props.chatroom._id)
}
render() {
return (
<tr onClick{this.handleClick}>
{/* This code isn't relevant to the problem */}
</tr>
)
}
}
ChatRoomRecord.PropTypes = {
chatroom: PropTypes.object.isRequired
}
这很好用,因此映射没有问题,而click事件在注册点击并显示被点击的
chatroom._id
时起作用。这是我的
EditChatRoom
组件:export class EditChatRoom extends Component {
render() {
return (
<div className="modal fade" id="editChatRoomModal" tabIndex="-1" role="dialog">
{/* This code isn't relevant to the problem */}
</div>
)
}
}
我需要打开此模式并通过
chatroom
组件中单击的ChatRoomRecord
。希望这能更好地解释问题。
最佳答案
您可以简单地使用Session
显示所选记录和模式的状态(显示或隐藏):
ChatRoomRecord.jsx
export class ChatRoomRecord extends Component {
// ...
handleClick(event) {
event.preventDefault()
Session.set('selectedRecordId', this.props.chatroom._id);
Session.set('isShowModal', true);
}
// ...
}
EditChatRoom.jsx
class EditChatRoom extends Component {
render() {
const {
selectedRecordId
} = this.props;
return (
<div className="modal fade" id="editChatRoomModal" tabIndex="-1" role="dialog">
{/* use the selectedRecordId */}
</div>
)
}
}
export default createContainer(() => {
// show modal if isShowModal is true
if (Session.get('isShowModal')) {
$('#editChatRoomModal').show();
} else {
$('#editChatRoomModal').hide();
}
return {
selectedRecordId: Session.get('selectedRecordId'),
};
}, EditChatRoom)
该代码有效,尽管仅用于演示如何解决您的问题。我建议您使用react-bootstrap代替普通的Bootstrap。并使用另一个反应性源(ReactiveVar或ReactiveDict)来存储反应性值而不是Session,因为Session具有全局范围,因此很容易搞乱