web-dev-qa-db-fra.com

relier natif à onPress avec un argument

Le comportement souhaité est de passer un argument (texte) au gestionnaire onClick pour le console.log, mais il semble que je me trompe de syntaxe.

Si je laisse l'argument comme ci-dessous, cela fonctionne très bien:

export default class Nav extends Component {
  componentDidMount() {
    this.props.pickNumber(3);
  }

  onPress() {
    console.log('FOOOBAAR');
  }
  render() {
    return (
      <View>
        <Text>####################</Text>
        <Text>Intro Screen</Text>
        <Text>Number: {this.props.numbers}</Text>
        <TouchableHighlight onPress={this.onPress.bind(this)}>
          <Text>Go to Foo</Text>
        </TouchableHighlight>
      </View>
    );
  }

}

Cependant, si je veux passer un argument au gestionnaire onPress, il se plaint de "ne peut pas lire la propriété 'bind' de non définie.

export default class Nav extends Component {
  componentDidMount() {
    this.props.pickNumber(3);
  }

  onPress(txt) {
    console.log(txt);
  }
  render() {
    return (
      <View>
        <Text>####################</Text>
        <Text>Intro Screen</Text>
        <Text>Number: {this.props.numbers}</Text>
        <TouchableHighlight onPress={this.onPress('foo').bind(this)}>
          <Text>Go to Foo</Text>
        </TouchableHighlight>
      </View>
    );
  }

}

Merci

Ajout: Si je le change en:

onPress={this.onPress.bind('foo')}

ça ne marche pas non plus.

bindingreact-native
39
Wasteland

Vous pouvez faire la liaison dans le constructeur en utilisant ES6:

export default class Nav extends Component {
  constructor(props) {
    super(props);

    this.onPress = this.onPress.bind(this);
  }

puis

  onPress(txt) {
    console.log(txt);
  }

  render() {
    return (
      <View>
        <Text>####################</Text>
        <Text>Intro Screen</Text>
        <Text>Number: {this.props.numbers}</Text>
        <TouchableHighlight onPress={() => this.onPress('foo')}>
          <Text>Go to Foo</Text>
        </TouchableHighlight>
      </View>
    );
  }
}
49
inga

Vous pouvez éviter de lier la fonction dans le constructeur en la liant à la valeur onPress et en passant l'argument après "this". Le modèle de constructeur est correct, mais plus j'entre dans OO land, plus il est fastidieux. Vous pouvez refactoriser votre code de la manière suivante:

export default class Nav extends Component {
  componentDidMount() {
    this.props.pickNumber(3);
  }

  onPress(txt) {
    console.log(txt);  // foo
  }
  render() {
    return (
      <View>
        <Text>####################</Text>
        <Text>Intro Screen</Text>
        <Text>Number: {this.props.numbers}</Text>
        <TouchableHighlight onPress={this.onPress.bind(this,'foo')}>
          <Text>Go to Foo</Text>
        </TouchableHighlight>
      </View>
    );
  }

}

Le premier argument est 'this' et tout autre argument peut être fourni après celui qui sera reçu dans le même ordre.

25
GulshanZealous

Vous pouvez aussi le résoudre avec de grosses flèches:

export default class Nav extends Component {

  handlePress = (text) => {
    console.log(text);
  }

  render() {
    return (
      <View>
        <Text>####################</Text>
        <Text>Intro Screen</Text>
        <Text>Number: {this.props.numbers}</Text>
        <TouchableHighlight onPress={() => this.handlePress('weeeeee')}>
          <Text>Go to Foo</Text>
      </TouchableHighlight>
    </View>
    );
  }
}
13
TechnoTim

Vous devez juste passer une fonction de flèche grasse avant d'appeler la fonction.

onPress= {()=> this.handlePress(param)}
7
Binova Gautam