如何从另一个功能访问道具中的功能

Question

我正在与React的第一步，所以很抱歉，如果我的问题是基本/愚蠢的。 :)

我们为了具有从this.props.selectUser(user)访问该连接的操作从一类：

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

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

然后我使用的组件，以使数据表（反应的自举表）和I设置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

这在你的函数是指在功能，但你真正想要的这指的是这个类。

你可以在渲染器中使用'const self = this'。 （并使用self.selectUser（row.user））

或使onRowSelect方法的UserList（render方法之外），并在构造函数中添加this.onRowSelect = this.onRowSelect.bind（this），这样会参考你的课程，因此你可以访问你的道具。

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

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

Answer 2

无需终极版的connect()的mapDispatchToProps参数映射到另一个对象，bindActionCreators() already does that for you：

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

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