2017-06-12 43 views
1

子コンポーネントの親コンポーネントから関数(checkAndErase)を呼び出すために "refs"を使用していますが、動作させることはできません。私は反応が新しくて誰も助けてくれますか?事前 でのありがとうはエラー例外:以下親コンポーネントから子コンポーネント関数を呼び出す

私の親がレンダリングされ 「()未定義の読み取ることができませんプロパティ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}/> 
+1

ヘイ、ミラノ。私はバックアップし、子コンポーネントの関数を直接呼び出さずに必要なものをどのように達成できるかを検討します。 Reactはビューライブラリであり、その強みはコンポーネント間の情報の流れを制限することで、予測可能かつ効率的なレンダリングを行うことができます。より良い設計はおそらく、ボード状態への変更を実行するコンテナコンポーネントを持つことです。 solve()を呼び出して、小道具を介してのみプレゼンテーション情報を渡します。 –

+0

私はあなただけでこれを変更する必要があると思う: 'たonPress = {this.refs.child.checkAndErase()}'これに : 'たonPress = {()=> this.refs.child.checkAndErase( )} ' –

+0

Erikが正しいです。あなたの状態をツリーの "上位"のコンポーネントに移すことで、データと関数を親から子に渡すことができます。これは、Reactで行うことの慣習的なやり方です。 あなたの質問に直接答えるには、 'onPress = {()=> this.child.checkAndErase()}'を試してみてください。 – mulleady1

答えて

0

方法:

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

これは、コールバック参照によって格納され、 'this.child'で直接アクセスできます。 'this.refs.child'は未定義です。 – colti

+0

ああ良いキャッチ。私は自分のコードをコピーしてチェックしなかった – Brandon

関連する問題