如何在Native React中的孩子內部調用父功能

經過數小時的搜索後才發現沒有找到答案......我在尋求您的幫助。如何在Native React中的孩子內部調用父功能

所以我想要做的是：在子內調用名爲_toggleSearchBar（）的函數（它在父類中），這樣當onPress事件（在子項中）觸發它時，會更改「isVisible」家長。

家長

class HomeScreen extends React.Component { 

    constructor(props) { 
    super(props); 

    this.state = {isVisible: false}; 
    } 

    static navigationOptions = { 
    title: 'P O S T E R', 
    headerStyle: { backgroundColor: '#CECECE' }, 
    headerTitleStyle: { color: 'black', fontSize: 30, fontFamily: 'HelveticaNeue-CondensedBlack'}, 
    headerRight: <DisplayIcon src={require('./ressources/icon_search.png')} myMethod={'HERE'}/>, 
    headerLeft: <DisplayIcon src={require('./ressources/icon_aroundMe.png')}/>, 
    }; 
    render() { 
    const { navigate } = this.props.navigation; 
    return (
     <View> 
      <View style={styles.bck}> 
      <ScrollView> 
      <DisplayImage src={require('./ressources/logo.jpg')} /> 
      <DisplayImage src={require('./ressources/logo1.jpeg')} /> 
      <DisplayImage src={require('./ressources/logo2.jpg')} /> 
      <DisplayImage src={require('./ressources/logo3.jpeg')} /> 
      <DisplayImage src={require('./ressources/logo4.jpg')} /> 
      <DisplayImage src={require('./ressources/logo5.jpeg')} /> 
      <DisplayImage src={require('./ressources/bde.jpeg')} /> 
      </ScrollView> 
     </View> 
     <Display enable={this.state.isVisible} style={styles.ViewIn}> 
      <View> 
      <TextInput style={styles.textIn}></TextInput> 
      </View> 
     </Display> 
     </View> 
    ) 
    } 
    _toggleSearchBar() { 
    this.setState(previousState => { 
     return { isVisible: !this.state.isVisible }; 
    }); 
    } 
}

兒童

class DisplayIcon extends React.Component { 

    constructor(props) { 
    super(props); 
    } 

    render() { 
    return (
     <TouchableHighlight onPress={this.myMethod} activeOpacity= {0.4} underlayColor={ 'rgb(206, 206, 206)' }> 
     <Image style={styles.Picture} source={this.props.src}/> 
     </TouchableHighlight> 
    ); 
    } 
} 

const styles = StyleSheet.create({ 
    Picture: { 
    marginLeft: 10, 
    marginRight: 10, 
    height: 30, 
    width: 30, 
    } 
});

綁定沒有工作。不通過道具傳遞功能...

感謝您的幫助和您的時間！

來源

2017-10-16 Maxime

請不要發佈圖片的代碼。直接將您的代碼添加到問題中，以便幫助人們幫助您。 – bennygenel

好吧，我的壞 – Maxime

位於層次結構中的DisplayIcon組件在哪裏？因爲我在HomeScreen中看到的只是DisplayImage。 DisplayImage和DisplayIcon是否是相同的組件？ –

在子組件你應該調用this.props.myMethod而不是this.myMethod。
例子：

<TouchableHighlight onPress={this.props.myMethod} activeOpacity= {0.4} underlayColor={ 'rgb(206, 206, 206)' }>

在你家長你應該通過在道具的孩子 - myMethod={this._toggleSearchBar}。
例子：

<DisplayIcon src={require('./ressources/icon_search.png')} myMethod={this._toggleSearchBar}/>

請注意，您應該綁定_toggleSearchBar到class。
做它在constructor：

constructor(props){ 
    super(props); 
    this._toggleSearchBar = this._toggleSearchBar.bind(this); 
}

來源

2017-10-16 19:44:23

嗯，我這樣做，它不工作。 – Maxime

什麼不起作用？你有錯誤嗎？ –

沒有錯誤，但沒有顯示出來，因爲它假設。我猜測我的代碼是錯誤的，所以我改變了函數alert（'azert'）; ...仍然沒有錯誤，但我沒有通過該功能，當我點擊警報不顯示 – Maxime

HELP對於修真

子裏面。

這不是工作（通過父函數）

<TouchableHighlight onPress={this.props.myMethod} activeOpacity= {0.4} underlayColor={ 'rgb(206, 206, 206)' } style={styles.lol}> 
 
     <Image style={styles.Picture} source={this.props.src}/> 
 
</TouchableHighlight>

這是工作（通過子功能）

lol() { 
 
    alert('lol'); 
 
    } 
 

 
    render() { 
 
    return (
 
     <TouchableHighlight onPress={this.lol} activeOpacity= {0.4} underlayColor={ 'rgb(206, 206, 206)' } style={styles.lol}> 
 
     <Image style={styles.Picture} source={this.props.src}/> 
 
     </TouchableHighlight>

來源

2017-10-16 20:23:01 Maxime

如何在Native React中的孩子內部調用父功能

回答

相關問題