我想再次单击元素以清除先前的值,而不是更改其状态?我想每次用新数据初始化模态。我可以使用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>
</>
);
}
}