Comment appeler une fonction parentale à l'intérieur d'une fonction enfant dans Native React ?

Question

Après des heures passées à chercher sur Google sans trouver de réponse... Je vous demande de m'aider.

Ce que je veux faire : Appeler la fonction nommée _toggleSearchBar() (qui est dans le parent) dans l'enfant de sorte que lorsque l'événement onPress (qui est dans l'enfant) se déclenche, il change la valeur 'isVisible' dans le parent.

Parent

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 };
    });
  }
}

Enfant

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,
  }
});

La liaison n'a pas fonctionné. Ni le passage de la fonction par les props ...

Merci pour votre aide et votre temps !

Answer 1

En el Enfant vous devez invoquer this.props.myMethod et non this.myMethod .
Exemple :

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

Dans votre Parent vous devez passer une prop à l'enfant - myMethod={this._toggleSearchBar} .
Exemple :

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

Notez que vous devez lier _toggleSearchBar à la class .
Faites-le dans le constructor :

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

Answer 2

AIDE À LA COMPRÉHENSION

A l'intérieur de l'enfant.

Cela ne fonctionne pas (via la fonction Parent)

<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>

Cela fonctionne (via la fonction enfant)

  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>