当前位置: 动力学知识库 > 问答 > 编程问答 >

reactjs - Dispatch redux action when clicking cell in react-table

问题描述:

How can I dispatch the action returned by the 'editUser' action creator when the client clicks on the Edit link for a given user in the Users table?

import React, { Component } from 'react';

import { connect } from 'react-redux';

import {bindActionCreators} from 'redux';

import ReactTable from 'react-table';

import { editUser } from '../actions/users'

class Users extends Component {

render() {

return (

<div>

<ReactTable className="-striped "

data={this.props.users}

columns={columns}

/>

</div>

);

}

}

const columns = [{

id: 1,

header: 'Namn',

}, {

id: 2,

header: '',

accessor: 'id',

render: (row) => (<a href="#">Edit</a> ),

}

];

function mapStateToProps(state) {

return {

users: state.users.users,

}

}

function matchDispatchToProps(dispatch) {

return bindActionCreators({ editUser }, dispatch)

}

export default connect(mapStateToProps, matchDispatchToProps)(Users);

My action creator:

export function editUser(user) {

return {

type: 'EDIT_USER',

user

}

}

网友答案:

Take care of the click event

<ReactTable
  getTdProps={(state, rowInfo, column, instance) => {
    return {
      onClick: e => {
        this.props.editUser(rowInfo.userId)
      }
    }
  }}
/>

You should probably tweak your action a bit too, usually you just pass the minimal data needed. In this case, user id.

分享给朋友:
您可能感兴趣的文章:
随机阅读: