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调用父功能

回答

相关问题