リアクションネイティブボタンonPressが機能しない

Question

私のボタンonPressに機能​​をバインドしようとしています。しかし、それは動作していません。ページを更新すると、ボタンをクリックせずにアラートが表示され、アラートを閉じてボタンをクリックしても何も起こりません。

マイコードは次のとおりです。私は間違って何をやっている

：

class ActionTest extends Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     thename: 'somename' 
    }; 
    } 

    handleClick(){ 
    alert('Button clicked!'); 
    } 

    render(){ 
     return(
     <View> 
      <Button 
      onPress={this.handleClick()} 
      title="Click ME" 
      color="blue" 
      /> 
     </View> 
     ); 
    } 
} 

また、私は警告を取得していますか？

Answer 1

あなたはonPress={this.handleClick()}

コールバックとしてそれに関数を渡すために、代わりにonPress={this.handleClick}を試してみてくださいを持っているとして、それがレンダリングするときは、handleClickを呼んでいます。

Answer 2

コードを更新してください！

<Button 
     onPress={this.handleClick} 
     title="Click ME" 
     color="blue" 
     /> 

Answer 3

まず、クリックハンドラを矢印関数として定義します。このようにして、この関数をもうバインドする必要はありません。あなたの関数は次のようになります。

handleClick =() => { 
    alert('Button clicked!'); 
} 

次に、このような<Button>タグでこの機能を使用する：反応-ネイティブがクリックイベントを検出し、ユーザーに通知したい、それがonPressを呼び出すと

<Button 
onPress={this.handleClick} 
title="Click ME" 
color="blue" 
/> 

Answer 4

関数としてprop。これはonPress​​にメソッドを結ぶ

onPress={this.handleClick} 

：ので、あなたは次のようにonPress小道具にに機能を与える必要があります。

onPress={this.handleClick.bind(this)} 

幸運