从模态对原始组件反应本机调用函数

Question

如何在组件上方显示的模式中从根组件调用函数？

我的 HomePage.js 调用组件如下：

export default class HomePage extends Component {
  
  constructor(props) {
    super(props);
    this.state = {
      isModalVisible: false
    };
  }

 
  toggleModal = () => {
    this.setState({isModalVisible: !this.state.isModalVisible});
  };

 render() {
   return (
     <View style={styles.container}>
       <Button title = "Get Started" onPress = {this.toggleModal} style={{width:150, height:50}}/>
       <SignUpModal display = {this.state.isModalVisible}/>
       <Image
          style={{ width: 335, height: 356 }}
          source={require('../assets/images/PSHomePageMobile.png')}
        />
     </View>
   );
 }
}

然后我的模态渲染如下。我的目标是，当用户单击他们拥有帐户时，他们将能够导航到 signInModal。为此，我想先关闭 signUpModal。

const SignUpModal = (props) => {

    const [firstName, setFirstName] = useState('');

    return(
        <Modal isVisible = {props.display}>
                <View style={styles.container2}>
                <ScrollView style={styles.scrollView}>
                <View style={{flexDirection: 'row', justifyContent: 'center'}}>
                        <Text style={styles.title}>Sign Up</Text>
                        <View>
                                <Text style={styles.fieldTitle}>Have an account?</Text>
                                <Text style={styles.accent} onPress={()=>HomePage.toggleModal()}>Sign In</Text>
                        </View>      
                </View>
                <Text style={styles.fieldTitle}>First Name</Text>
                <TextInput
                        style={styles.textbox}
                        onChangeText={firstName => setFirstName(firstName)}
                        defaultValue={firstName}
                />

                <Button title="Sign Up"/>
                </ScrollView>
                </View>
        </Modal>
        );
}
    
export default SignUpModal;

Answer 1

您应该将回调函数传递给您的模态，如下所示

export default class HomePage extends Component {
  
  constructor(props) {
    super(props);
    this.state = {
      isModalVisible: false
    };
  }

 
  toggleModal = () => {
    this.setState({isModalVisible: !this.state.isModalVisible});
  };

 render() {
   return (
     <View style={styles.container}>
       <Button title = "Get Started" onPress = {this.toggleModal} style={{width:150, height:50}}/>
       <SignUpModal display = {this.state.isModalVisible} toggle={this.toggleModal}/>
       <Image
          style={{ width: 335, height: 356 }}
          source={require('../assets/images/PSHomePageMobile.png')}
        />
     </View>
   );
 }
}

你可以在modal里面调用这个函数

<Button title="Sign Up" onPress={props.toggle}/>