Click Handler, вызываемый немедленно в React Native

Question

Я написал обработчик кликов, чтобы разрешить кнопку загрузки на URL-адрес магазина Google Play.

Проблема в том, что при загрузке страницы 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> 

To:

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

С изменением вы создаете анонимную функцию, вызывающую «ваш» метод. Это будет работы.