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

【问题标题】：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+)*(\.\w{2,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='johnsmith@gmail.com'
                            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() 函数在哪里？
我不知道在哪里添加这个。

标签： reactjs react-native

【解决方案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>

【讨论】：