模态关闭不起作用答案

【问题标题】：modal close not work模态关闭不起作用
【发布时间】：2018-03-07 07:13:33
【问题描述】：

模态打开但不关闭...

当使用 alert this.state.visibleModal 为 false，但 modal 仍处于打开状态时...

output =
      <Modal
        animationType = {"none"}
        transparent = {false}
        visible={this.state.visibleModal}
        onRequestClose = {() => { this.toggleModal(!this.state.visibleModal) } }
      >
        <View style = {styles.modalBackground}>
          <Text>
            hello
          </Text>

          <TouchableOpacity
            onPress = {()=> {
              this.toggleModal(!this.state.visibleModal)
            }}
          >
            <Text>close</Text>
          </TouchableOpacity>

        </View>
      </Modal>

    this.setState({output:output})

toggleModal相关函数：

toggleModal(visible){
    this.setState({visibleModal:visible})
  }

程序相关的渲染函数：

render() {
 return (
      <View style={styles.MainContainer}>

        <TextInput
          ref="mobileField"
          style={styles.input}
          autoCorrect={false}
          onChangeText={this.handleMobile}
        >
        </TextInput>

        <TouchableOpacity
          style={styles.submitButton}
          onPress={
            ()=>this.editMe(this.state.mobile)
          }
        >
        <Text style={styles.submitButtonText}>edit</Text>
        </TouchableOpacity>

        <View>{this.state.output}</View>

      </View>
    );
  }

请帮我解决问题...

谢谢..

【问题讨论】：

你能展示你的render函数吗？
请显示代码您的Modal 组件

标签： reactjs react-native react-router react-redux

【解决方案1】：

您不应该将 React DOM 元素存储在 state 中，只需将 visible 标志存储在 state 中

render() {
 return (
      <View style={styles.MainContainer}>

        <TextInput
          ref="mobileField"
          style={styles.input}
          autoCorrect={false}
          onChangeText={this.handleMobile}
        >
        </TextInput>

        <TouchableOpacity
          style={styles.submitButton}
          onPress={
            ()=>this.editMe(this.state.mobile)
          }
        >
        <Text style={styles.submitButtonText}>edit</Text>
        </TouchableOpacity>

        <View>
          <Modal
        animationType = {"none"}
        transparent = {false}
        visible={this.state.visibleModal}
        onRequestClose = {() => { this.toggleModal(!this.state.visibleModal) } }
      >
        <View style = {styles.modalBackground}>
          <Text>
            hello
          </Text>

          <TouchableOpacity
            onPress = {()=> {
              this.toggleModal(!this.state.visibleModal)
            }}
          >
            <Text>close</Text>
          </TouchableOpacity>

        </View>
      </Modal>
        </View>

      </View>
    );
  }

【讨论】：