Question

在文件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时，该如何设置？我尝试道具，setState不起作用

其他所有方法都可以正常工作，如果我尝试退出onPress并将变量保留为默认值（显示的默认值），但是当我将其保留为false并尝试按按钮传递true时，我将无法执行任何操作方式。

Answer 1

您需要在父组件（登录）中保留可见性状态，并将其作为道具传递给Popup组件。然后，在Popup组件中，只需在需要的地方使用props.dialogVisible

单击按钮React Native时显示组件

1 个答案: