Question

我正在使用React迈出第一步，很抱歉，如果我的问题是基本的/愚蠢的。：）

我已经从一个类连接了一个Action，以便能够访问this.props.selectUser(user)：

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

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

然后我使用一个组件来创建DataTables（react-bootstrap-table），然后设置selectRow={selectRowProp}来添加交互并调用一个类函数：

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

这是在行选择时调用onRowSelect的状态选项：

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

在该函数内无法访问this.props.selectUser(row.user);

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

我该怎么办？请帮忙！这是整个清理过的代码：

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

这在你的函数中指的是函数，但你实际上想要这个引用类。

你可以使用＆＃39; const self = this＆＃39;在渲染中。（并使用self.selectUser（row.user））

或者使用onRowSelect UserList的方法（在render方法之外）并在构造函数中添加this.onRowSelect = this.onRowSelect.bind（this），这样这将引用你的类，因此你可以访问你的道具。 / p>

在React中经常调用render方法，所以我认为你应该避免声明函数和太多东西。

或者更好的可以参考这篇文章：http://reactkungfu.com/2015/07/why-and-how-to-bind-methods-in-your-react-component-classes/

Answer 2

无需将redux＆＃39; mapDispatchToProps的{{1}}参数映射到另一个对象bindActionCreators() already does that for you：

connect()

如何从另一个函数访问道具中的函数

2 个答案: