1

ユーザーに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>
    );
}
4

3 に答える 3

1

状態 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>
    );
}
于 2020-07-05T16:03:17.003 に答える
0

コードを次のように変更する必要があります。

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>
  );
};
于 2020-07-05T14:49:01.207 に答える