1
votes

Renvoyer le composant JSX onPress react-native

Je veux inviter les utilisateurs à obtenir des informations sur onPress, mais le retour de JSX à partir d'un onPress n'a jamais fonctionné, alors quelle est une solution de contournement possible pour retourner JSX en fonction d'un clic sur le bouton. Voici mon code:

const InputPrompt = (props) => {
    const [name, setName] = useState('');

    return(
        <View>
        <DialogInput 
                     title={"New Activity"}
                        submitText={"Add"}
                        hintInput ={"Enter activity name....."}
                        submitInput={ (inputText) => {setName(inputText), props.setPrompt(false)} }
                        closeDialog={ () => {props.setPrompt(false)}}>
        </DialogInput>
        <Text>{name}</Text>
        </View>
    );
}

Mise à jour:

Voilà à quoi ressemble mon code:

const Newact = props => {

  const [prompt, setPrompt] = useState(false);

    return(
            <View style={styles.button} >
            <TouchableOpacity  style={styles.center} onPress={() => setPrompt(true)}>
                    <Text style={styles.plusSign}>+</Text>
                    </TouchableOpacity>
                   {prompt ? <InputPrompt setPrompt={setPrompt} />  : null}
            </View>
    );
}

et Le composant InputPrompt est:

import React, { useState } from 'react';
import {
    StyleSheet,
    KeyboardAvoidingView,
    View,
    Text,
    TouchableOpacity
} from 'react-native';
import InputPrompt from './InputPrompt' 

const Newact = (props) => {
  const [visible, setVisible] = useState(false)
    return(
        <View>
            <View style={styles.button} >
            <TouchableOpacity  style={styles.center} onPress={getTitle}>
                    <Text style={styles.plusSign}>+</Text>
                    </TouchableOpacity>
            </View>
        </View>
    );
}
 
const getTitle = () =>{
  return(
    <InputPrompt />
  )
}

reactjs react-native jsx onpress

0 commentaires

3 Réponses :

3
votes

Lorsqu'ils appuient sur, vous devez définir l'état. Cela provoque le rendu du composant, et sur ce nouveau rendu, vous pouvez renvoyer JSX décrivant à quoi vous voulez que l'écran ressemble. Je ne sais pas exactement où vous souhaitez afficher l'invite de saisie, mais peut-être quelque chose comme ceci:

const Newact = (props) => {
    const [visible, setVisible] = useState(false)
    const [prompt, setPrompt] = useState(false);
    return (
        <View>
            <View style={styles.button} >
            <TouchableOpacity style={styles.center} onPress={() => setPrompt(true)}>
                <Text style={styles.plusSign}>+</Text>
            </TouchableOpacity>
            </View>
            {prompt && <InputPrompt />}
        </View>
    );
}

4 commentaires

Tu es incroyable!! merci pour la réponse rapide de son fonctionnement.

comme suivi, je vois que l'invite n'est renseignée qu'au premier clic. Comment puis-je inclure une réinitialisation à l'invite var ? quelque chose comme {prompt? && setPrompt (false): null}

Dépend de la condition que vous souhaitez réinitialiser. Si le même TouchableOpacity doit être capable de le masquer s'il est actuellement affiché, changez-le en onPress = {() => setPrompt (! Prompt)} . Si une presse différente est censée le cacher, écrivez un onPress pour ce composant qui appelle setPrompt (false) . Ou peut-être est-il censé disparaître en fonction d'une heure, auquel cas vous utiliseriez un effet. Il existe de nombreuses options, en fonction de votre objectif.

@OmarOdaini puis sélectionnez la réponse comme la bonne

0
votes

Vous devez changer votre code en quelque chose comme ceci:

const Newact = props => {
  const [visible, setVisible] = useState(false);

  const getTitle = () => {
    setVisible(true);
  }

  return (
    <View>
      <View style={styles.button}>
        <TouchableOpacity style={styles.center} onPress={getTitle}>
          <Text style={styles.plusSign}>+</Text>
        </TouchableOpacity>
        {
          visible && <InputPrompt />
        }
      </View>
    </View>
  );
};

1 commentaires

Tu es incroyable!! merci pour la réponse rapide, même idée que le commentaire précédent;)

1
votes

La mise à jour de l'état onPress est un moyen simple d'y parvenir car il restituera ensuite le composant et vous pouvez exécuter n'importe quel jsx en fonction de cet état que vous avez mis à jour.

Vous pouvez utiliser une expression ternaire {isPressed? : null}

voici à quoi il ressemblera dans votre cas

const Newact = (props) => {
    const [visible, setVisible] = useState(false)
    const [prompt, setPrompt] = useState(false);
    return (
        <View>
            <View style={styles.button} >
            <TouchableOpacity style={styles.center} onPress={() => setPrompt(true)}>
                <Text style={styles.plusSign}>+</Text>
            </TouchableOpacity>
            </View>
            {prompt ? <InputPrompt /> : null}
        </View>
    );
}

0 commentaires