返回JSX组件onPress react-native [英] Return JSX component onPress react-native

问题描述

我想提示用户在onPress上获取输入，但是从onPress返回JSX却从未奏效，所以有什么可能的解决方法是基于按钮单击来返回JSX.这是我的代码:

I want to prompt users to get input onPress but returning JSX from an onPress never worked so whats a possible workaround to return JSX based on button click. Here's my code:

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

更新:

现在，这就是我的代码的样子:

Update:

Now thats how my code looks:

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

和InputPrompt组件是:

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

推荐答案

按下它们时，您应该设置状态.这将导致组件重新渲染，并且在该新渲染上，您可以返回JSX来描述您想要屏幕的外观.我不确定您要在何处呈现输入提示，但也许是这样的:

When they press, you should set state. This causes the component to rerender, and on that new render you can return JSX describing what you want the screen to look like. I'm not sure exactly where you want to render the input prompt, but maybe something like this:

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

这篇关于返回JSX组件onPress react-native的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！