从父组件调用子组件函数

我正在使用“refs”从父组件中调用子组件中的函数（checkAndErase），但无法使其工作。任何人都可以帮助我在这里，因为我新的反应。 Thanx提前抛出错误：从父组件调用子组件函数

下面是我的父母渲染 “的（）未定义无法读取性能checkAndEarse”功能：

<View> 
    <TouchableOpacity disabled={initing} onPress={this.refs.child.checkAndErase()} style={styles.actionButton}> 
     <Text style={[styles.actionButtonText, initing && styles.disabled]}> 
     Eraser 
     </Text> 
    </TouchableOpacity> 
    </View> 

    <Board puzzle={puzzle} ref={ref => {this.child = ref}} solve={this.solve} erasing={erasing} editing={editing} 
    onInit={this.onInit.bind(this)} onErrorMove={this.onErrorMove} onFinish={this.onFinish}/>

来源

2017-06-12 milan kumar

嘿，米兰。我会备份并考虑如何在不调用子组件函数的情况下直接完成所需内容。 React是一个视图库，它的优势在于限制组件之间的信息流动，因此您可以进行可预测且高效的呈现。更好的设计可能有一个容器组件，它执行对电路板状态的改变，例如，解决（），然后只通过道具传递展示信息。 –

我想你只需要改变这一点： 'onPress = {this.refs.child.checkAndErase（）}' 这样： 'onPress = {（）=> this.refs.child.checkAndErase（）}' –

Erik是对的。将状态移动到树中的“更高”组件将允许您将数据和函数从父项传递给子项，这是在React中执行操作的惯用方式。但是，要直接回答你的问题，试试'onPress = {（）=> this.child.checkAndErase（）}'。 – mulleady1

您需要使用箭头函数的语法后期绑定孩子的方法：

onPress={() => this.child.checkAndErase()}

来源

2017-06-12 21:26:21 Brandon

它通过回调ref存储并可以通过'this.child'直接访问。 'this.refs.child'将是未定义的。 – colti

啊很好。我只是复制他的代码，并没有检查它 – Brandon

从父组件调用子组件函数

回答

相关问题