web-dev-qa-db-fra.com

Réagit de la fonction de passe native au composant enfant en tant que prop

Je suis nouveau dans React Native (et React) et j'essaie de transmettre une fonction en tant qu'accessoire à un composant.

Mon objectif est de créer un composant dans lequel sa fonctionnalité onPress peut être définie par l'instanciateur du composant, afin qu'elle soit davantage réutilisable.

Voici mon code jusqu'à présent.

App.js

import React, { Component } from 'react';
import { View } from 'react-native';
import TouchableButton from './components/touchable-button';

export default class App extends Component<Props> {
  constructor () {
    super();
  }

  handlePress () {
    // this should be called when my custom component is clicked
  }

  render () {
    return (
      <View>
        <TouchableButton handlePress={this.handlePress.bind(this)}/>
      </View>
    );
  }
}

TouchableButton.js

import React, { Component } from 'react';
import { TouchableHighlight } from 'react-native';
import AppButton from "./app-button";

export default class TouchableButton extends Component {
  handlePress;

  constructor(props){
    super(props);
  }

  render () {
    return (
      <TouchableHighlight onPress={
        this.props.handlePress
      }>
        <AppButton/>
      </TouchableHighlight>
    );
  }
}

Je passe la fonction handlePress en tant que prop handlePress. Je m'attendrais à ce que les accessoires du TouchableButton contiennent cette fonction, mais ce n'est pas là.

javascriptreactjsreact-native
4
Jerred Shepherd

Lors de l'écriture de handlePress={this.handlePress.bind(this)}, vous passez une exécution d'instruction (qui, quand et si exécutée, renvoie une fonction). Ce qui est attendu est de transmettre la fonction elle-même avec handlePress={this.handlePress} (et de faire la liaison dans le constructeur) ou handlePress={() => this.handlePress()}, qui transmet une fonction anonyme qui, une fois exécutée, exécutera handlePress dans le contexte de classe this.

2
Moti Korets
// Parent

handleClick( name ){
   alert(name);
}

<Child func={this.handleClick.bind(this)} />

// Children

let { func } = this.props;

func( 'VARIABLE' );
2
Naycho334

Solution

Utilisez la fonction arrow et ne vous souciez pas de la liaison this.

Et je recommande de vérifier null avant d'appeler la méthode props.

App.js

export default class App extends Component<Props> {
  constructor () {
    super();
  }

  handlePress = () => {
    // Do what you want. 
  }

  render () {
    return (
      <View>
        <TouchableButton onPress={this.handlePress}/>
      </View>
    );
  }
}

TouchableButton.js

import React, { Component } from 'react';
import { TouchableHighlight } from 'react-native';
import AppButton from "./app-button";

export default class TouchableButton extends Component {
  constructor(props){
    super(props);
  }
  
  handlePress = () => {
    // Need to check to prevent null exception. 
    this.props.onPress?.(); // Same as this.props.onPress && this.props.onPress();
  }

  render () {
    return (
      <TouchableHighlight onPress={this.handlePress}>
        <AppButton/>
      </TouchableHighlight>
    );
  }
}

0
Jeff Gu Kang