如何正确地将React onClick事件与Redux绑定？

基本上没有迹象表明这个事件被绑定在某个地方，而且它没有发射。这里的组件如何正确地将React onClick事件与Redux绑定？

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上运行的。

这样做的正确方法是什么？

来源

2017-02-25 Aurimas

正确的绑定将是'的onClick = {this.props.onItemClick.bind（这一点，a.id）' – cubbuk

这应该工作： '的onClick = {（）=> this.props.onItemClick（a.id））}' 在这种情况下，将它绑定到_this_没有用处。当你使用这种方法时，你会得到什么样的错误？ – mahieus

@cubbuk它在React调试工具现在识别为'onClick ='绑定onItemClick（）''的情况下工作，但没有任何反应，并且控制台登录事件本身不会执行任何操作 – Aurimas

您希望点击在您的标签上。用下面的代码改变您的事件将被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> 
    ); } }

来源

2017-02-26 16:17:19 mahieus

尝试结合事件在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父定义，是被作为道具传入。

来源

2017-02-25 20:15:25 grizzthedj

反应开发工具显示事件是绑定的（就像我在其他一些情况下尝试的那样），但实际上并没有在实际的DOM上注册。什么可能是错的？谢谢 – Aurimas

我注意到，在ItemList渲染函数中，你正在渲染Item，但你的子组件实际上叫做ItemPoint？也许这是问题的一部分？编辑：只是意识到@jpdelatorre已经以另一种方式问了这个问题。 – grizzthedj

不，我之前更改过代码中的名称，现在更改为真实代码。还有什么想法？ – Aurimas

如何正确地将React onClick事件与Redux绑定？

回答

相关问题