Wie binden Sie React onClick Event korrekt mit Redux?

Question

Grundsätzlich gibt es kein Anzeichen dafür, dass das Ereignis irgendwo gebunden ist und es nicht zündet. Hier ist die Komponente

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> 
    ); 
    } 
} 

Die console.log (this.props) Ausgänge:

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

Hier ist die redux Komponente:

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 
) 

Das ist das Kind Komponente:

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> 
    ); 
    } 
} 

Ich habe mehrere Möglichkeiten der Bindung versucht das Ereignis:

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

Nicht scheinen zu arbeiten.

Verwenden Sie this für Reac-Redux verbinden Sie Wrapper im Laden zu übergeben. Dies läuft auf Ruby on Rails Kettenräder beta4.

Was ist der richtige Weg, dies zu tun?

Answer 1

Sie möchten, dass der Klick auf Ihrem Tag angezeigt wird. Mit dem folgenden Code ändern Sie Ereignis getriggert werden: würde korrigieren

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

Versuchen Sie das Ereignis in Ihrem ItemList Konstruktor Bindung:

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

Dann in Ihrer ItemList Render-Funktion ...

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

Dies setzt voraus, dass die onItemClick Funktion in ItemList Eltern definiert ist, und als Requisite übergeben werden.