ReactNative:当状态改变时,如何在Modal中渲染ListView

时间:2018-10-28 09:35:30

标签: react-native

当复选框(this.state.check)的状态为true时,列表视图内的复选框被选中,但在onItemSelect()方法中状态发生变化时,它不被选中。

我想更改模式列表视图中复选框的状态,并根据状态更改立即采取行动。

这是我的代码

export default class Create extends Component {
	  constructor(props) {

	        super(props);
	 
	        this.state = {

                 check:false
}
}
    
onItemSelect(row, data){

		let tmp = this.state.selectedItems;
		let tmpItem = this.state.selectedData;

		if(tmp.includes(row)){
			tmp.splice(tmp.indexOf(row), 1);
			tmpItem.splice(tmpItem.indexOf(data), 1);
			this.setState({check:false});
		} else {
			this.setState({check:true});
			tmp.push(row);
			tmpItem.push(data);
		}
				}
render(){
return(

<Modal visible={this.state.isModalVisible}
style={{margin:20,borderRadius:5,width:width/1.3,height:height/2}}>

<View style={{right:0}}>
<ListView 
enableEmptySections={true}
dataSource={this.state.dataSource}
renderRow={(dataItem,  sectionID, rowID) => {
return(
<View >
<List style={{backgroundColor:'#fff'}}>
<ListItem >
<Body style={{}}>
<Grid>
<Row>
<Col size={90}></Col>
<Col size={10}>
<TouchableOpacity>
<CheckBox color={'black'}
isChecked={this.state.selectedItems.includes(rowID) ? true : false}
onClick={() => this.onItemSelect(rowID,dataItem)}
/>
</TouchableOpacity>
</Col>
</Row>
</Grid>
</Body>
</ListItem>
</List>
</View>
)
}}
/>
</View>
</Modal>
)}
}

0 个答案:

没有答案