ReactJs調用父功能

如果重複，我很抱歉。我將父函數傳遞給子，但是當我在子中使用此方法時，它給我這個錯誤 _this2.props.changeAppMode不是函數ReactJs調用父功能

我試過stackover流已經回答了問題，但無法解決它。我是個新手，所以可能我錯過了一些其他概念

以下是我的部件

父組件

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;

感謝您的期待。真的很感謝你的幫助

很抱歉，如果它是重複的，但我是那種一卡在它

來源

2016-11-29 Adeel Arshad

你確定它不工作？我只是試圖在一個hello world類型的例子中重新創建它，並且它似乎在做它的工作。你期待的結果是什麼？ – dubes

如果有幫助，可以在小提琴中找到一個簡單的例子：http://jsfiddle.net/09e93seL/1/ – dubes

是的，它的工作愚蠢的錯誤是在我的最後。謝謝大家。 * Mayank Shukla *告訴我要在每個階段打印道具，而且這樣做的訣竅。謝謝 –

我認爲這是關係到孩子組件綁定。您可以在將道具傳遞給子組件時嘗試下面的代碼塊嗎？ <TopActionsComponent changeAppMode={::this.props.changeAppMode} />

來源

2016-11-29 08:12:16

你忘了把代碼放在你的答案中。 – dubes

現在給出這個錯誤 **無法讀取未定義的**'綁定' –

試試這個，它解決了我面對的同樣的問題。

在ReadUserComponent組件：

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

在ReadUserComponent定義該函數：

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

在TopActionsComponent組件：

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

在TopActionsComponent組件定義該函數：

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

來源

2016-11-29 08:23:45

現在控制檯中沒有顯示錯誤，但函數沒有觸發。我放置了一個控制檯。登錄我的父功能，但它不是diplaying changeAppMode（newMode，userId）{this.setState（{currentMode：newMode}）; if（userId！== undefined）{this.setState（{userId：userId}）; } console.log（this.state.currentMode）; } –

編輯此部分onClick = {this.changeAppMode.bind（this，'create'）} –

將控制檯放在每個changeAppMode（）中，並查看它是否全部通過。 –

沒問題。嘗試這個。我認爲它應該工作。

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

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

來源

2016-11-29 08:30:05

現在控制檯中沒有顯示錯誤，但函數沒有觸發。我在我的父函數中放置了一個console.log，但是它並沒有執行 changeAppMode（newMode，userId）{this.setState（{currentMode：newMode}）; if（userId！== undefined）{this.setState（{userId：userId}）; } console.log（this.state.currentMode）; } –

ReactJs調用父功能

回答

相關問題