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 

ここでReduxのコンポーネントです：

子コンポーネントです

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を使用してreac-redux connectラッパーを保管します。これはRuby on Rails Sprockets beta4上で実行されています。

これを行う正しい方法は何ですか？

Answer 1

オンクリックをあなたのタグにします。

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コンストラクタでイベントを結合してみてください。あなたのITEMLISTレンダリング機能で次に

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

...これはonItemClick機能はITEMLIST親に定義されていることを前提としてい

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

を、そしてあります支柱として渡される。