Question

我想创建带有某些映射功能的组件，以便在项目中循环，当单击任何项目时，将以模态显示详细信息，但它不是true，并且模态不能通过单击切换。

constructor(props){
  super(props),
  this.state={
    isModalVisible: false,
  }
};

requestData(){
  return(
    SuggestionData.map(function (i) {
      const _this=this;
        return(
          <View key={i.id} style={styles.ContainerViewMSg3}>
            <ListItem noBorder >
              <View style={styles.ContainerTimer}>
                <TouchableOpacity
                  style={styles.ReplayButton} 
                  onPress={()=> _this._toggleModal}>
                    <Text>Click me!</Text>
                </TouchableOpacity>
                <View style={styles.ContainerOffer}>
                  <Text style={styles.ItemTimeMSG}>{i.OwnerMsg}:</Text>
                </View>
              </View>
            </ListItem>
        </View>
      )
    })
  )
}

_toggleModal = () =>
    this.setState({ isModalVisible: !this.state.isModalVisible });

render(){
    return({this.requestData()})
}

这是我的模态代码

<Modal isVisible={this.state.isModalVisible}>
  <View style={styles.ModalView}>
    <View style={styles.yellowView}>
      <TouchableOpacity onPress=
        {this._toggleModal}>
        <IconFontAwesome name='close' size={36}
          color={them.white} style=
            {{ marginTop: 5, marginLeft: 210 }}/>
      </TouchableOpacity>
      <Image source={infoModal} style=
        {styles.infoIconModal}/>
      <Text style={styles.Ensure}>ok?</Text>
    </View>
    <View style={styles.ContentModal}>

      <View style={styles.ButtonsModal}>
        <TouchableOpacity style=
          {styles.okButton2}><Text style=
            {{ color: them.green, fontFamily: them.fontName }}>Yes</Text>
        </TouchableOpacity>
        <TouchableOpacity style=
          {styles.cancelButton}><Text style=
            {{ color: them.green, fontFamily: them.fontName }}>No</Text>
        </TouchableOpacity>
      </View>
    </View>
  </View>
</Modal>

您能帮我解决这个问题

Answer 1

您的代码有多个问题。 1. SuggestionData.map(function (i) {更改此SuggestionData.map((i) => {，这将确保上下文。 2. _toggleModal = () => this.setState({ isModalVisible: !this.state.isModalVisible });替换为_toggleModal = () => { this.setState({ isModalVisible: !this.state.isModalVisible });}

应该是

requestData(){
    return(
        SuggestionData.map((i) => {
                return(
                    <View key={i.id} style={styles.ContainerViewMSg3}>
                        <ListItem noBorder >
                            <View style={styles.ContainerTimer}>
                                <TouchableOpacity style= . 
                                    {styles.ReplayButton} 
                               onPress={()=> this._toggleModal
                                } >
                                    <Text>Click me!</Text>
                                </TouchableOpacity>
                                <View style={styles.ContainerOffer}>
                                    <Text style={styles.ItemTimeMSG}> 
                                          {i.OwnerMsg}: </Text>
                                </View>

                            </View>
                        </ListItem>
                    </View>
                )
            })
    )
}
_toggleModal = () => {
  this.setState({ isModalVisible: !this.state.isModalVisible });
}

希望这可以解决您的问题。

地图功能中的开放模式响应本机

1 个答案: