返回 JSX 组件 onPress react-native

Posted 2023-04-18

【中文标题】返回 JSX 组件 onPress react-native

【英文标题】：Return JSX component onPress react-native

【发布时间】：2020-10-25 18:08:01

【问题描述】：

我想提示用户在 onPress 上获取输入，但从 onPress 返回 JSX 从来没有奏效，所以有什么可能的解决方法来基于按钮单击返回 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>
    );

【参考方案1】：

当他们按下时，你应该设置状态。这会导致组件重新渲染，并且在新的渲染上，您可以返回 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>
    );

【讨论】：

你太棒了！！感谢您对其工作的快速响应。

作为跟进，我看到提示仅在第一次单击时填充。如何包含对 var prompt 的重置？类似prompt ? <InputPrompt /> && setPrompt(false) : null

取决于您要重置它的条件。如果相同的 TouchableOpacity 应该能够在当前显示时将其隐藏，则将其 onPress 更改为onPress=() => setPrompt(!prompt)。如果应该使用不同的按下来隐藏它，那么为调用setPrompt(false) 的组件编写一个 onPress。或者它应该根据时间消失，在这种情况下你会使用效果。有很多选择，具体取决于您的目标。

@OmarOdaini 然后选择正确的答案

【参考方案2】：

更新 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>
    );

【参考方案3】：

你需要把你的代码改成这样：

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

【讨论】：

你太棒了！！感谢您的快速响应，与之前的评论相同；）