ReactJs親機能を呼び出す

Question

重複していると申し訳ありません。親の関数を子に渡していますが、このメソッドを子供に渡すと、このエラーが返されます。 _this2.props.changeAppModeは関数ではありません。

私はすでにスタックオーバーフローを試みましたが、解決できませんでした。私は、私は以下の

は私のコンポーネントの子の

親コンポーネント

class Users extends React.Component { 
    constructor(props) { 
     super(props); 
     this.state = { 
      currentMode: 'read', 
      userId: null 
     }; 

     this.changeAppMode = this.changeAppMode.bind(this); 
    } 

    changeAppMode(newMode, userId) { 
     this.setState({currentMode: newMode}); 

     if (userId !== undefined) { 
      this.setState({userId: userId}); 
     } 
    } 

    render() { 

     var modeComponent = 
      <ReadUserComponent 
       changeAppMode={this.changeAppMode}/>; 

     switch (this.state.currentMode) { 
      case 'read': 
       break; 
      case 'readOne': 
       modeComponent = <ViewUser />; 
       break; 
      default: 
       break; 
     } 

     return modeComponent; 
    } 
} 
export default Users; 

子供

class ReadUserComponent extends React.Component { 
    constructor(props) { 
     super(props); 
     console.log(props); 
    }; 

    componentDidMount() { 
     this.props.fetchUsers(); 
    } 

    render(){ 
     const users = this.props.users; 
     return (
      <div className='overflow-hidden'> 
       <h1>Users List </h1> 
       <TopActionsComponent changeAppMode={this.props.changeAppMode} /> 

       <UsersTable 
        users={users} 
        changeAppMode={this.props.changeAppMode} /> 
      </div> 
     ); 
    } 
} 

ReadUserComponent.propTypes = { 
    users: React.PropTypes.array.isRequired, 
    fetchUsers: React.PropTypes.func.isRequired 
} 

function mapStateToProps(state) { 
    return { 
     users: state.users 
    } 
} 

export default connect(mapStateToProps, { fetchUsers })(ReadUserComponent); 

子[親を呼び出し、このコンポーネントです他のいくつかの概念が欠落しています可能性があります初心者です機能]

class TopActionsComponent extends React.Component { 
    render() { 
     return (
      <div> 
       <a href='#' 
        onClick={() => this.props.changeAppMode('create')} 
        className='btn btn-primary margin-bottom-1em'> Create product 
       </a> 
      </div> 
     ); 
    } 
} 

デフォルトのエクスポートTopActionsComponent;

ありがとうございます。それが重複しているが、私は一種の私はそれが子コンポーネントに結合に関連すると思うそれ

Answer 1

で立ち往生していた場合、本当にあなたの助け

申し訳ありません感謝しています。子コンポーネントに小道具を渡しながら、コードの下に試してみてください。 <TopActionsComponent changeAppMode={::this.props.changeAppMode} />

Answer 2

これを試して、私が直面していたのと同じ問題を解決してください。

<TopActionsComponent changeAppMode={this.changeAppMode.bind(this)} /> 

はReadUserComponentこの関数を定義する：TopActionsComponent成分中

changeAppMode(type){ 
    this.props.changeAppMode(type); 
} 

：

<a href='#' onClick={this.changeAppMode.bind(this,'create')} 
    className='btn btn-primary margin-bottom-1em'> Create product 
</a> 

がTopActionsComponentコンポーネントで、この関数を定義する：ReadUserComponent成分中

changeAppMode(type){ 
    this.props.changeAppMode(type); 
} 

Answer 3

大丈夫です。これを試して。私はそれがうまくいくと思う。

<ReadUserComponent changeAppMode={() => this.changeAppMode}/>;

<UsersTable users={users} changeAppMode={() => this.props.changeAppMode} />