從父組件調用子組件函數

我正在使用「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

從父組件調用子組件函數

回答

相關問題