どのようにバインドする（これ）は、ネイティブの反応の小道具として機能を渡すとき

Question

私は簡単な電卓のアプリケーションに反応ネイティブを学ぶために取り組んでいます。私は、数字ボタンを表示するボタンコンポーネントを持っています。ボタンに触れたときに親の状態が新しい番号に更新されるように関数に渡す必要があります。 bind（this）がなければthis.setStateは未定義です。コンストラクタにbind（this）を追加すると、私のアプリケーションに空白のページが表示されます。私のコードは以下の通りです。

コンストラクタ：

constructor() { 
    super(); 
    this.state = { 
     total: 0, 
     display: 0 
    }; 
    this._displayUpdate = this._displayUpdate.bind(this); 
    } 

電卓のボタンの1行：

<View style={styles.buttonRow}> 
      <NumButton numText={7} update={this._displayUpdate} /> 
      <NumButton numText={8} update={this._displayUpdate} /> 
      <NumButton numText={9} update={this._displayUpdate} /> 
      <FuncButton funcText={'*'} /> 
     </View> 

数値ボタンコンポーネント：

export default class NumButton extends Component { 
    render() { 
     return (
      <TouchableHighlight style={styles.buttonArea} onPress={this.props.update(this.props.numText)}> 
       <Text style={styles.buttonText}>{this.props.numText}</Text> 
      </TouchableHighlight> 
     ) 
    } 
} 

Answer 1

あなたの親bindは正しいです。問題は、NumButtonコンポーネントのTouchableHighlightのonPressです。実行するコードを追加することはできません。関数を渡す必要があります。それをしなかった

export default class NumButton extends Component { 
render() { 
    return (
     <TouchableHighlight style={styles.buttonArea} 
      onPress={()=>{ this.props.update(this.props.numText) }} 
     > 
      <Text style={styles.buttonText}>{this.props.numText}</Text> 
     </TouchableHighlight> 
    ) 
} 

}