React Nativeで直ちにクリックされたハンドラーをクリックします

Question

GoogleのプレイストアURLにダウンロードボタンを解決するためのクリックハンドラーを作成しました。

ページが読み込まれるとすぐにURLにアクセスするのが問題です。

クリックハンドラはonPress属性の中にネストされています。私は何も押さないので、なぜこのようなことが起こるのか理解していません。

助けていただけたら幸いです！

OpenURL.js：

'use strict'; 
import React, { 
    Component, 
    PropTypes, 
    Linking, 
    StyleSheet, 
    Text, 
    TouchableNativeFeedback, 
    TouchableHighlight, 
    View 
} from 'react-native'; 

class OpenURLButton extends Component { 

    constructor(props) { 
    super(props); 
    } 

    handleClick(url) { 
    console.log(url); 
    console.log('handling click! this is : '); 
    console.dir(this); 
    Linking.canOpenURL(this.props.url).then(supported => { 
     if (supported) { 
     Linking.openURL(this.props.url); 
     } else { 
     console.log('Don\'t know how to open URI: ' + this.props.url); 
     } 
    }); 
    } 

    render() { 
    console.log('logging "this" inside render inside OpenURL.js:'); 
    console.dir(this); 
    return (
     <TouchableHighlight onPress={this.handleClick(this.props.appStoreUrl)}> 
     <Text>Download {this.props.appStoreUrl}</Text> 
     </TouchableHighlight> 
    ); 
    } 

} 


OpenURLButton.propTypes = { 
    url: React.PropTypes.string, 
} 

export default OpenURLButton; 

Inventory.js：

<ScrollView> 
     <View style={styles.ImageContainer}> 
     <Image style={styles.ImageBanner} source={{uri: selectedInventory.bannerImage}} /> 
     </View> 
     <View style={styles.ListGridItemCaption}> 
     <Image style={[styles.ImageThumb, styles.ImageGridThumb]} source={{uri: selectedInventory.thumbImage}} /> 
     <Text style={styles.Text} key="header">{name}</Text> 
     </View> 
     <View> 
     <Text>{selectedInventory.description}</Text> 
     <OpenURLButton url={selectedInventory.appStoreUrl}/> 
     </View> 
    </ScrollView> 

Answer 1

変更：

<TouchableHighlight onPress={this.handleClick(this.props.appStoreUrl)}> 
    <Text>Download {this.props.appStoreUrl}</Text> 
</TouchableHighlight> 

へ：

<TouchableHighlight onPress={() => {this.handleClick(this.props.appStoreUrl)}}> 
    <Text>Download {this.props.appStoreUrl}</Text> 
</TouchableHighlight> 

"your"メソッドを呼び出す匿名関数を作成しています。このはになります。