Показывать компонент при нажатии на кнопку React Native - PullRequest
Новая
       101

Показывать компонент при нажатии на кнопку React Native

0 голосов
/ 27 мая 2020

в файле popUpDialog. Js 

export default class DialogTester extends Component {
  constructor(props) {
    super(props)

    this.state = {
      dialogVisible: false
   };

  }
  showDialog = () => {
    this.setState({ dialogVisible: true });
  };

  handleCancel = () => {
    this.setState({ dialogVisible: false });
  };

  handleRedefinir = () => {
        this.setState({ dialogVisible: false });
  };
handleEmail = (email) => {
    console.log(email);
}

  render() {
    const {dialogVisible} = this.state;
    return (
      <View>      
        <Dialog.Container visible={this.state.dialogVisible}>
          <Dialog.Title>Redefinir Senha</Dialog.Title>
          <Dialog.Description>
            Digite seu e-mail cadastrado
          </Dialog.Description>
          <Dialog.Input placeholder="E-mail"  onChangeText={(email) => this.handleEmail(email)}
           ></Dialog.Input>
          <Dialog.Button label="Cancelar" onPress={this.handleCancel} />
          <Dialog.Button label="Redefinir" onPress={this.handleRedefinir} />
        </Dialog.Container>
      </View>
    );
  }
}

пока все в порядке

в файле Index. js

import React, { Component } from "react";
import {
  View,
  TextInput,
  Text,
  TouchableOpacity,
  SafeAreaView,
  StatusBar,
} from "react-native";
import styles from "./styles";
import PopUp from "../Login/popUpDialog";

export default class Login extends Component {
    render() {
    return (
      <SafeAreaView>                
          <TouchableOpacity
            onPress={() => <PopUp dialogVisible = true /> } //It does not work

            style={styles.redefinirButton}
          >
            <Text style={styles.textRedefinirButton}>Redefinir Senha</Text>
          </TouchableOpacity>

      </SafeAreaView>
    );
  }
}

Как мне сделать dialogVisible = true при нажатии? Я пробую props и setState не работают

Все остальное работает, если я попытаюсь выйти из onPress и оставлю переменную как true по умолчанию, она отображается, но когда я оставлю ее false и попытаюсь передать true, когда Нажимаю кнопку, никак не могу.

1 Ответ

0 голосов
/ 27 мая 2020

Вам необходимо сохранить состояние видимости в родительском компоненте (Login) и передать его как опору компоненту Popup. Затем в компоненте Popup просто используйте props.dialogVisible там, где он вам нужен

...