React - 处理父组件中的事件

时间:2016-12-02 15:30:57

标签: reactjs mobx-react

我正在使用一些通用组件来提升可重用性,例如列表,按钮,表等。这些组件都有一个控制器类,用于处理同一组组件之间的所有属性,如listItem,listContainer,从ListHead。我的问题是如何使用列表将事件从控制器冒泡到父组件。

父组件调用列表

    @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}
            />
        )
      }

    }

列表组件(创建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>
  }
}

列出控制器类

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
  }

如何从父组件访问click事件?

0 个答案:

没有答案