如何从其他功能访问道具中的功能

Question

I am making first steps with React, so sorry if my question is basic/stupid. :)

I have connected an Action from a Class in order to have access to that from this.props.selectUser(user) :

function matchDispatchToProps(dispatch) {
    return bindActionCreators({
        selectUser: selectUser
    }, dispatch);
}

export default connect(mapStateToProps, {matchDispatchToProps })(UserList);

Then I used a component to make DataTables (react-bootstrap-table) and I set selectRow={selectRowProp} to add interaction and call a class function:

<BootstrapTable data={mappedUsers} selectRow={selectRowProp} >
    <TableHeaderColumn isKey dataField='id'>ID</TableHeaderColumn>
    ...
</BootstrapTable>

this is the option that state to call onRowSelect on row selecting :

const selectRowProp = {
    mode: 'checkbox',
    clickToSelect: true,
    hideSelectColumn: true,
    onSelect: onRowSelect
}

Within the function is not possible to access this.props.selectUser(row.user);

function onRowSelect( row, isSelected, e) {
    console.log("THIS: ", this);
    this.props.selectUser(row.user);
}

How can I do? Please help! This is the whole cleaned code:

import React, {Component, PropTypes} from 'react';
import {bindActionCreators} from 'redux';
import {connect} from 'react-redux';
import {selectUser} from '../actions/index';
import ReactBsTable,{BootstrapTable, TableHeaderColumn} from 'react-bootstrap-table';
import {Link} from 'react-router';

class UserList extends Component {
    constructor(props) {
        super(props);
        this.state = {
            selected: [],
            currPage: 1
        };
    }

    render() {
        const {  currPage } = this.state;
        populateUserList(this.props.users.content);

        function onRowSelect( row, isSelected, e) {
            this.props.selectUser(row.user);
        }

        const options = {
            sizePerPageList: [ 5, 10, 15, 20 ],
            sizePerPage: 10,
            page: currPage,
            sortName: 'id',
            sortOrder: 'desc'
        };

        const selectRowProp = {
            mode: 'checkbox',
            clickToSelect: true,
            hideSelectColumn: true,
            onSelect: onRowSelect
        }

        return (
            <div>
                <BootstrapTable data={mappedUsers} striped  selectRow={selectRowProp} pagination={true} options={options}  >
                    <TableHeaderColumn isKey dataField='id'>ID</TableHeaderColumn>
                    <TableHeaderColumn dataField='name'>Name</TableHeaderColumn>                   
                </BootstrapTable>

                <Link to="/" className="btn btn-info btn-lg pull-right">Back to Search</Link>
            </div>
        );
    }
}

function mapStateToProps(state) {
    return {
        mappedUsers: state.mappedUsers
    };
}

function matchDispatchToProps(dispatch) {
    return bindActionCreators({
        selectUser: selectUser
    }, dispatch);
}

export default connect(mapStateToProps, {matchDispatchToProps })(UserList);

Answer 1

this in your function refers to the function but you actually want this to refer to the class.

You could use 'const self = this' inside the render. (and use self.selectUser(row.user))

Or make onRowSelect a method of UserList (outside of the render method) and add in the constructor this.onRowSelect = this.onRowSelect.bind(this) so this will refer to your class and therefore you could access your props.

the render method is called often in React so, I think you should avoid declaring functions and too much stuff in it.

Or better could refer to this article : http://reactkungfu.com/2015/07/why-and-how-to-bind-methods-in-your-react-component-classes/

Answer 2

No need to map the mapDispatchToProps parameter of redux's connect() into another object, bindActionCreators() already does that for you :

function mapDispatchToProps(dispatch) {
    return bindActionCreators({
        selectUser: selectUser
    }, dispatch);
}

export default connect(mapStateToProps, mapDispatchToProps)(UserList);