单击按钮上的关闭模式反应本机

Posted 2023-03-07

【中文标题】单击按钮上的关闭模式反应本机

【英文标题】：Close modal on click button react native

【发布时间】：2019-12-10 06:35:54

【问题描述】：

我有一个在按钮单击时显示的模态，并且该模态是使用 prop 从另一个组件中获取的。

在模态中有一个关闭模态的按钮，如何在单击按钮时关闭模态。我试过了，还是不行。

//InvalidUser

const InvalidUser = (props) => (
<Modal
    visible=props.display
    animationType="slide"
    onRequestClose=() => console.log('closed')
>
    <View style=styles.modalBox>
        <View style=width: 300>
            <Text style=styles.text>
                props.data
            </Text>
            <TouchableOpacity
                onPress=() =>
                    this.closeModal()
                >
                <Text style=styles.buttonOk>Ok</Text>
            </TouchableOpacity>
        </View>
    </View>
</Modal>
);

//登录

export default class LoginFirst extends Component 
constructor(props) 
    super(props);

    this.state = 
        email: '',
        modalVisible: false
    ;


nextBtn = () => 
    let reg = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w2,3)+$/;

    if (this.state.email !== '') 
        if (reg.test(this.state.email) === false) 

        
        else 
            this.setState(modalVisible: true);
        
    


render() 
    let notRegistered = this.state.email+' is not recognized as a registered user. Please contact us for further assistance.';

    return (
        <View style=styles.container>
            <ScrollView contentContainerStyle=styles.scroller>
                <View
                    style=styles.inputSection
                >
                    <Text style=styles.label>Email Address:</Text>
                    <View style=styles.section>
                        <Image
                            style=styles.icon
                            source=require('../../../../assets/user.png')
                        />
                        <TextInput
                            style=styles.input
                            placeholder='[e-mail]'
                            underlineColorandroid='transparent'
                            onChangeText=(text) => this.setState(email:text)
                        />
                    </View>
                    <TouchableOpacity 
                        style=styles.button
                        onPress=() =>
                            this.nextBtn()
                        
                    >
                            <Text style=styles.next>Next</Text>
                    </TouchableOpacity>
                </View>
            </ScrollView>
            <InvalidUserModal
                data=notRegistered
                display=this.state.modalVisible
            />
        </View>
    );

上面的代码完美地显示了模态，但是我无法关闭模态。有什么办法可以关闭。

请看下图。

【问题讨论】：

closeModal() 函数在哪里？

我不知道在哪里添加这个。

【参考方案1】：

从父组件创建 closeModal 函数并将其传递给 InvalidUserModal

closeModal = () => 
  this.setState(modalVisible: false);


<InvalidUserModal
   data=notRegistered
   display=this.state.modalVisible
   closeModal=this.closeModal
/>

并在按下按钮时在 InvalidUserModal 中调用它

<TouchableOpacity onPress=props.closeModal>
  <Text style=styles.buttonOk>Ok</Text>
</TouchableOpacity>

【讨论】：

不显示Uncaught TypeError: Cannot read property 'props' of undefined at Object.onPress

@JithinVarghese 抱歉，没注意到你用的是函数组件，把 this.props 改成 props

上述更改不起作用，请检查一下。

我已将console.log 放入closeModal。但它没有显示。

@JithinVarghese 抱歉，忘记将 closeModal 传递给 InvalidUserModal 大声笑，再检查一遍

【参考方案2】：

对于父级，将closeModal 方法作为道具传递给您的组件

  class LoginFirst extends Component 
      closeModal = () => 
        this.setState(modalVisible: false);
      
      render() 
        return (
          <InvalidUserModal
            data=notRegistered
            display=this.state.modalVisible
            closeModal=this.closeModal
          />
        )
      
    

对于你的模态组件

<Modal
  visible=props.display
  animationType="slide"
  onRequestClose=() => console.log('closed')
>
  <TouchableOpacity onPress=props.closeModal>
    <Text style=styles.buttonOk>Ok</Text>
  </TouchableOpacity>
</Modal>