2
votes

rendu conditionnel sur Press for TouchableHighlight

J'essaie de rendre conditionnellement un onPress , si le prop de description est indéfini , je veux une fonctionnalité onPress . Mon onPress se déclenche malgré tout, comment puis-je le supprimer si la description n'est pas définie

constructor(props) {
    super(props);

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

_onPressButton(event) {
    Alert.alert(event.description);
}

render() {
    const { start, end, summary, description } = this.props;

    return (
        <TouchableHighlight
            onPress={() => {
                description == "" ? null : this._onPressButton;
            }}

        >

reactjs react-native

0 commentaires

3 Réponses :

0
votes

Vous pouvez utiliser l'accessoire désactivé . Si tel est le cas, le TouchableHighlight sera désactivé

Quelque chose comme ça

 <TouchableHighlight
  onPress={() => {
    this._onPressButton;
  }}
  disabled={description === ''}
 >

TouchableHighlight a les mêmes accessoires que TouchableWithoutFeedback

https://facebook.github.io/react-native/docs/touchablewithoutfeedback#disabled

0 commentaires

1
votes

La condition que vous utilisez renverra toujours false car une chaîne vide n'est pas indéfinie:

onPress={description && this._onPressButton }

Ce comportement est assez étrange car votre fonction n'est même pas retournée dans votre fonction de flèche.

Ce qui suit devrait faire l'affaire en mettant une fonction qui ne fait rien: p >

onPress={description ? this._onPressButton : x => {} }

Cela peut également fonctionner avec un inline si:

console.log(undefined == "")

0 commentaires

1
votes

vous pouvez le faire comme ci-dessous ou désactiver

constructor(props) {
    super(props);

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

_onPressButton(event) {
    Alert.alert(event.description);
}

render() {
    const { start, end, summary, description } = this.props;

    return (
        <TouchableHighlight
            onPress={() => {
                description == "" ? { } : this._onPressButton; // You can add { } instead of null
            }}
           disabled={description === ""} // Or you can just disabled conditionally 

        >

0 commentaires