如何正確地將React onClick事件與Redux綁定？

Question

基本上沒有跡象表明這個事件被綁定在某個地方，而且它沒有發射。這裏的組件

class AgendaPointsList extends React.Component { 
    constructor(props) { 
    super(props); 
    this.onAgendaPointClick = this.props.onAgendaPointClick.bind(this); 
    } 

    render() { 
    let items = this.props.agenda_points.map((a, i) => { 
     return <AgendaPoint key={i} agenda_point={a} index={i} onClick={this.onAgendaPointClick} /> 
    }) 

    console.log(this.props) 

    return (
     <table> 
     <tbody> 
      {items} 
     </tbody> 
     </table> 
    ); 
    } 
} 

的執行console.log（this.props）輸出：

Object 
item_point: Object 
item_points: Array[4] 
onItemPointClick: onItemPointClick(id) 
onModalCloseClick: onModalCloseClick(id) 
store: Object 
storeSubscription: Subscription 
__proto__: Object 

這裏是終極版組件：

const OPEN_AGENDA_POINT = 'meeting/OPEN_AGENDA_POINT' 
const CLOSE_AGENDA_POINT = 'meeting/CLOSE_AGENDA_POINT' 

const initialState = { 
    modal_is_open: false, 
    point_id: 0, 
    point_data: {} 
} 

const openAgendaPoint = function (id) { 
    return { 
    type: OPEN_AGENDA_POINT, 
    id: id 
    } 
} 

const closeAgendaPoint = function (id) { 
    return { 
    type: CLOSE_AGENDA_POINT, 
    id: id 
    } 
} 

const agendaPointsReducer = function (state = initialState, action) { 
    switch (action.type) { 
    case OPEN_AGENDA_POINT: { 
     state.modal_is_open = true, 
     point_id = action.id 
    } 
    case CLOSE_AGENDA_POINT: { 
     state.modal_is_open = false 
    } 
    default: 
     return state 
    } 
} 


const agendaPointsUiStateProps = (state) => { 
    return { 
    agenda_point: state.point_data 
    } 
} 

const agendaPointsUiActions = (dispatch) => { 
    return { 
    onAgendaPointClick: (id) => { 
     console.log(id) 
     dispatch(openAgendaPoint(id)) 
    }, 
    onModalCloseClick: (id) => { 
     dispatch(closeAgendaPoint(id)) 
    } 
    } 
} 

const store = Redux.createStore(
    agendaPointsReducer, 
    window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__() 
) 

// Usage: 
const AgendaPointsList = connectWithStore(
    store, 
    AgendaPointsList, 
    agendaPointsUiStateProps, 
    agendaPointsUiActions 
) 

這是子組件：

class AgendaPoint extends React.Component { 
    render() { 
    return (
     <tr> 
     <td>{ this.props.index + 1 }</td> 
     <td>{ this.props.agenda_point.title}</td> 
     <td>6</td> 
     <td>{ this.props.agenda_point.agenda_time } min</td> 
     </tr> 
    ); 
    } 
} 

我嘗試了多種綁定方式事件：

onClick={this.props.onAgendaPointClick.bind(a.id, this) 
onClick={this.props.onAgendaPointClick(a.id, this).bind(this) 
onClick={() => this.props.onAgendaPointClick(a.id)) 

似乎沒有工作。

使用this來重新連接包裝器通過存儲。這是在Ruby on Rails Sprockets beta4上運行的。

這樣做的正確方法是什麼？

Answer 1

您希望點擊在您的標籤上。 用下面的代碼改變您的事件將被triggerd：

class AgendaPoint extends React.Component { render() { 
    return (
     <tr onClick={this.props.onClick}> 
     <td>{ this.props.index + 1 }</td> 
     <td>{ this.props.agenda_point.title}</td> 
     <td>6</td> 
     <td>{ this.props.agenda_point.agenda_time } min</td> 
     </tr> 
    ); } } 

Answer 2

嘗試結合事件在ITEMLIST構造：

constructor(props) { 
    super(props); 
    this.onItemClick = this.onItemClick.bind(this); 
    } 

然後在你的ITEMLIST渲染功能...

let items = this.props.agenda_points.map((a, i) => { 
    return <Item key={i} agenda_point={a} index={i} onClick={this.props.onItemClick} /> 
    }) 

這假設onItemClick功能在ITEMLIST父定義，是被作爲道具傳入。