Return JSX 组件 onPress react-native

Question

我想提示用户在 onPress 上获取输入，但是从 onPress returning JSX 从来没有奏效，所以有什么可能的解决方法 return 基于按钮点击的 JSX。这是我的代码：

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

更新：

这就是我的代码的样子：

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

Answer 1

当他们按下时，您应该设置状态。这会导致组件重新渲染，并且在新渲染上你可以 return JSX 描述你想要的屏幕外观。我不确定您想在哪里呈现输入提示，但可能是这样的：

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

Answer 2

您需要将代码更改为如下内容：

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

Answer 3

更新 onPress 状态是实现此目的的一种简单方法，因为它随后会重新渲染组件，您可以运行任何基于您更新的状态的 jsx。

你可以使用三元表达式 {isPressed ? <return your jsx here> : null}

这就是你的情况

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

Return JSX 组件 onPress react-native

Return JSX component onPress react-native

jsx

reactjs

react-native

onpress

更新：