I am using a couple of generic components to promote reusability such as list, button, table etc. These components all have a controller class which is used to handle all the properties between the same group of components such as listItem, listContainer, listHead. My issue is how can I bubble up the event from the controller to the parent component using the list.
Parent Component calling List
@inject('dataStore')
@observer
export class FooList extends Component {
handleListItemClick(id) {
console.log('Where I want to access click data!', id)
}
render() {
return (
<List
title='Foo List'
modeable
data={this.dataStore.Bar}
model={barModel}
listItemTypesEnabled={true}
/>
)
}
}
List Component (creating new instance of ListController)
export class List extends Component {
constructor(props) {
super(props)
this.listController = new ListController()
this.listController.title = props.title
this.listController.modeable = props.modeable
this.listController.data = props.data
this.listController.model = props.model
this.listController.listItemTypesEnabled = props.listItemTypesEnabled || false
props.selectedItemId = this.listController.selectedListItemId
}
render() {
return <Provider listController={this.listController}>
<ListContainer {...this.props} />
</Provider>
}
}
List Controller Class
import { observable, action, computed } from 'mobx'
export class ListController {
@observable data
@observable model
@observable title
@observable modeable
@observable listMode = 'thin'
@observable selectedListItemId = -1
@action handleModeClick = (mode) => {
this.listMode = mode
@action handleItemClick = (itemId) => {
console.log('clicked:', itemId)
this.selectedListItemId = itemId //i was able to get to this part successfully
}
How can i access the click event from the Parent component please?