1

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?

  • pass `handleListItemClick` to `List` ? – azium Dec 02 '16 at 15:51
  • You can check an [answer](http://stackoverflow.com/questions/40644092/react-how-to-notify-parent-for-changes/40644768#40644768) what I have posted before. You need to pass `handleListItemClick` as a callback in the attribute of the child component. – Andre Lee Dec 02 '16 at 16:19

0 Answers0