當點擊反應表中的單元格時調度redux動作

當客戶端點擊用戶表中給定用戶的Edit鏈接時，如何調度'editUser'動作創建者返回的動作？當點擊反應表中的單元格時調度redux動作

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

我的行動的創建者：

export function editUser(user) { 
    return { 
     type: 'EDIT_USER', 
     user 
    } 
}

來源

2017-02-23 Baz

你能分享你的行動代碼嗎？ – Geraint

@Geraint我的動作創作者現在非常簡單。 – Baz

照顧click事件

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

的你或許應該調整你的動作有點過了，通常你只是傳遞所需的最少數據。在這種情況下，用戶標識。

來源

2017-02-24 21:58:53 yujingz

'這'給我未定義 – Joe

我是怎麼看着這個是data屬性需要有editUser動作，所以我把這個添加到data屬性中。

const { users, editUser } = this.props 
const newUsers = users.map(r => { 
    return (
    {...r, editUser} 
) 
})

然後代替data={this.props.users}使用data={ newUsers }

這種方式，列的渲染方法中，row.editUser可作爲一個動作。

來源

2017-04-20 22:53:23 Joe

當點擊反應表中的單元格時調度redux動作

回答

相關問題