javascript - 如何从另一个函数访问 props 中的函数

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

函数中的 this 指的是函数，但实际上你希望 this 指的是类。

您可以在渲染中使用“const self = this”。 (并使用 self.selectUser(row.user))

或者使 onRowSelect 成为 UserList 的一个方法(在 render 方法之外)并在构造函数中添加 this.onRowSelect = this.onRowSelect.bind(this) 这样 this 将引用您的类，因此您可以访问您的 Prop 。

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

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