Question

模态打开但不关闭...

使用提醒时，this.state.visibleModal为false，但模态仍处于打开状态...

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>
    );
  }

请帮我解决问题...

感谢..

Answer 1

您不应该将React DOM元素存储在仅将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>
          <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>
    );
  }

莫代尔关闭不起作用

1 个答案: