未定義はオブジェクトではありません（this 'state.input'を評価する）

Question

jsonファイルからキーを読み込み、その値をテキストフィールドに表示しようとしています。ユーザーはTextInputフィールドにキー値を入力します。以下は、私が使用するコードです。テキストを入力して「送信」ボタンを押した後、「Undefined is not（this.state.input 'を評価する）オブジェクトではありません」というエラーがスローされます。私はバインディング/ showMeaning（）関数に値を渡すいくつかの問題があると思う。助けてください。

import React, {Component} from 'react'; 
import {AppRegistry, StyleSheet, Text, TextInput, View} from 'react-native'; 

var english_german = 'english_german.json'; 
class Dictionary extends Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     input: '', 
     output: '' 
    }; 
    } 

    showMeaning() { 
    var meaning = this.state.input in english_german ? english_german[this.state.input] : "Not Found"; 
    this.setState({ 
     output: meaning 
    }); 
    } 

    render() { 
    return (
     <View style={styles.parent}> 
     <Text> 
      Type something in English: 
     </Text> 
     <TextInput value={this.state.input} 
      onChangeText={(input) => this.setState({ input }) } 
      onSubmitEditing = {this.showMeaning} 
      /> 
     <Text style={styles.germanLabel}> 
      Its German equivalent is: 
     </Text> 
     <Text style={styles.germanWord}> 
      {this.state.output} 
     </Text> 
     </View> 
    ); 
    } 
}; 

var styles = StyleSheet.create({ 
    parent: { 
    padding: 16 
    }, 
    germanLabel: { 
    marginTop: 20, 
    fontWeight: 'bold' 
    }, 
    germanWord: { 
    marginTop: 15, 
    fontSize: 30, 
    fontStyle: 'italic' 
    } 
}); 

AppRegistry.registerComponent('Dictionary', function() { 
    return Dictionary; 
}) 

Answer 1

あなたはそれが正しいコンテキスト（this）にバインドされていないshowMeaning呼び出します。あなたはshowMeaningが正しくthisにバインドされていない、それまたは字句thisを持って使用する矢印の機能、例えば：

onSubmitEditing = {() => this.showMeaning()} 

Answer 2

madox2が言ったようにbind必要があります。これはいくつかの可能な解決策を伴う厄介な問題であり、賛否両論はthis medium postにリストされています。私の意見では最もクリーンなのはオプション5ですが、それはステージ2の機能を使う必要があります。