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

Posted 2023-02-16

【中文标题】从模态对原始组件反应本机调用函数

【英文标题】：React native call function on original component from modal

【发布时间】：2020-11-04 02:29:38

【问题描述】：

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

我的 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;

【参考方案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/>

【讨论】：

如果我这样做

对不起，它是一个功能组件，错过了，更新了答案