单击提交按钮时如何重置模式?

时间:2019-11-05 08:13:49

标签: reactjs react-native react-native-android react-modal

我想再次单击元素以清除先前的值,而不是更改其状态?我想每次用新数据初始化模态。我可以使用unmount解决我的问题吗?如果是的话,如何在这里使用Unmount我从来没有使用过。 This is my view part here i display data This is my modal here i want clear previous selected value

   import React, { Component } from "react";
   import { Button, View ,Text ,StyleSheet, FlatList, ScrollView} from "react-native";
   import Modal from 'react-native-modal';
   import {validateList} from "../Validation/validation";

  export default class WeeklyModal extends Component {
   constructor(props) {
     super(props);
     this.state = {
        list: [],
        visibleModal: false
      };
    }
 _validate() {
      if (validateList(this.state.list).status) {
         const a = this.state.list
         const  b =  a.toString()
         console.log(b)
        this.setState({ visibleModal: null ,list:[b] })
      } 
          else {
              alert("select list date")
              } 
        this.resetDate();
  }

  resetDate = () => {
    this.setState( { visibleModal: null } );
  };

getListViewItem = (item) => {
    let newList = this.state.list;
    if (newList.includes(item)) {
        let index = newList.indexOf(item);
        newList.splice(index,1);
        } else {
        newList.push(item);
    }
    this.setState({
        list: newList,
    });
}

 renderModalContent = () => (
<View>  
    <View style = {{backgroundColor:'white'}}>
        <View>
          <FlatList horizontal={true} 
              data = {[{day: '1'},{day: '2'}, {day: '3'},{day: '4'}, {day: '5'},{day: '6'},{day: '7'}]}
              renderItem={({item, index}) =>
                  <Text style={styles.textBox} key={index}
                        onPress={this.getListViewItem.bind(this, item.day)}>{item.day}
                  </Text>}
          />
           <Text style={{fontSize:20, color:'black', textAlign:'center'}}>{this.state.list} </Text>
            <ScrollView
              style = {{marginHorizontal: 20}} 
              horizontal={true}
            > 
              {
              this.state.list.map((l, index) => {
                  return(
                 index !== this.state.list.length - 1 ? <Text style={{fontSize:30, color:'red'}}>{l}, </Text> : <Text style={{fontSize:30, color:'red'}}>{l}</Text>
                  )
                })
              }
            </ScrollView>
            </View>
       </View>
  <Button onPress={() => this._validate()} title="Submit" />
  </View>
  );

 render() {
  return (
    <>
   <Text style={{fontSize:20}}>Frequency</Text>
        <View style={styles.container} >
            <Text style={styles.textBox}  onPress={() => this.setState({ visibleModal: 'default' })}>Weekly </Text>
          </View>
          <Text style={{fontSize:20, color:'black', textAlign:'center'}}>{this.state.list} </Text>
       <Modal isVisible={this.state.visibleModal === 'default'} 
         onBackButtonPress={() => this.setState({ visibleModal: null })}>
         {this.renderModalContent()}
       </Modal> 
     </>
  );
 }
}

0 个答案:

没有答案