다른 함수에서 소품의 함수에 액세스하는 방법

Question

React로 첫 번째 단계를 진행하고 있습니다. 내 질문이 기본/바보 인 경우 미안합니다. :)

나는 this.props.selectUser(user)에서 해당 액세스해야하기 위해 클래스에서 작업을 연결 한

: 다음

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

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

내가 DataTables (반응 - 부트 스트랩 테이블)을 만들기 위해 구성 요소를 사용하고 난 selectRow={selectRowProp} 설정

:

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

이 상태가 행 선택에 onRowSelect를 호출 할 수있는 옵션은 다음과 같습니다 클래스 기능을 상호 작용을 추가하고 호출 함수 내에서 87,

내가 어떻게 할 수있는 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)를 사용하십시오)

또는 렌더링 메소드 외부에서 UserList 메소드를 onRow로 선택하고 this.onRowSelect = this.onRowSelect.bind (this) 생성자를 추가하십시오. 수업을 참조하십시오. 따라서 소도구에 접근 할 수 있습니다.

렌더링 방법이 React에서 자주 호출되므로 함수에 너무 많은 내용을 넣지 않도록해야한다고 생각합니다.

이상이 문서의 내용을 참조하십시오. http://reactkungfu.com/2015/07/why-and-how-to-bind-methods-in-your-react-component-classes/

Answer 2

다른 개체로 REDUX의 connect()의 mapDispatchToProps 매개 변수를 매핑 할 필요가 없습니다, bindActionCreators() already does that for you :

함수에

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

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