我正在使用一些通用组件来提升可重用性,例如列表,按钮,表等。这些组件都有一个控制器类,用于处理同一组组件之间的所有属性,如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事件?