我在每个复选框中添加了一个onPress函数,将状态从“false”(目标名称)更改为“true”,但是当我编译代码时,复选框保持空白。我为复选框的名称设置了状态,然后我的handleCheckbox函数将e.target.name状态更改为!e.target.checked,其开头为false。 提前谢谢大家。
import React, { Component } from "react";
import { Modal, View } from "react-native";
import {
Container,
Header,
Content,
Text,
Right,
Left,
Button,
List,
ListItem,
CheckBox
} from "native-base";
export default class FilterModal extends Component {
constructor() {
super();
this.state = {
modalVisible: false,
catCalling: false,
bigPuddle: false,
scaffolding: false,
sidewalkClosed: false,
lightsOut: false,
snowPiles: false
};
}
handleCheckBoxes = e => {
this.setState({ [e.target.title]: !e.target.checked });
};
openModal() {
this.setState({ modalVisible: true });
}
closeModal() {
this.setState({ modalVisible: false });
}
render() {
return (
<View>
<Modal visible={this.state.modalVisible}>
<Container>
<Header>
<Left>
<Button transparent onPress={() => this.closeModal()}>
<Text>Back</Text>
</Button>
</Left>
</Header>
<Content>
<ListItem>
<Left>
<Text>Cat Calling</Text>
</Left>
<Right>
<CheckBox
title="catCalling"
checked={this.state.catCalling}
onPress={this.handleCheckBoxes}
/>
</Right>
</ListItem>
<ListItem>
<Left>
<Text>Big Puddle</Text>
</Left>
<Right>
<CheckBox
title="bigPuddle"
checked={this.state.bigPuddle}
onPress={this.handleCheckBoxes}
/>
</Right>
</ListItem>
<ListItem>
<Left>
<Text>Scaffolding</Text>
</Left>
<Right>
<CheckBox
title="scaffolding"
checked={this.state.scaffolding}
onPress={this.handleCheckBoxes}
/>
</Right>
</ListItem>
<ListItem>
<Left>
<Text>Sidewalk Closed</Text>
</Left>
<Right>
<CheckBox
title="sidewalkClosed"
checked={this.state.sidewalkClosed}
onPress={this.handleCheckBoxes}
/>
</Right>
</ListItem>
<ListItem>
<Left>
<Text>Lights Out</Text>
</Left>
<Right>
<CheckBox
title="lightsOut"
checked={this.state.lightsOut}
onPress={this.handleCheckBoxes}
/>
</Right>
</ListItem>
<ListItem>
<Left>
<Text>Snow Piles</Text>
</Left>
<Right>
<CheckBox
title="snowPiles"
checked={this.state.snowPiles}
onPress={this.handleCheckBoxes}
/>
</Right>
</ListItem>
</Content>
</Container>
</Modal>
<Button transparent onPress={() => this.openModal()}>
<Text style={{ color: "white" }}>Filter</Text>
</Button>
</View>
);
}
}
答案 0 :(得分:1)
你可以在onPress函数调用中直接设置状态。
import React, { Component } from "react";
import { Modal, View } from "react-native";
import {
Container,
Header,
Content,
Text,
Right,
Left,
Button,
List,
ListItem,
CheckBox
} from "native-base";
export default class FilterModal extends Component {
constructor() {
super();
this.state = {
modalVisible: true,
catCalling: false,
bigPuddle: false,
scaffolding: false,
sidewalkClosed: false,
lightsOut: false,
snowPiles: false
};
}
openModal() {
this.setState({ modalVisible: true });
}
closeModal() {
this.setState({ modalVisible: false });
}
render() {
return (
<View>
<Modal visible={this.state.modalVisible}>
<Container>
<Header>
<Left>
<Button transparent onPress={() => this.closeModal()}>
<Text>Back</Text>
</Button>
</Left>
</Header>
<Content>
<ListItem>
<Left>
<Text>Cat Calling</Text>
</Left>
<Right>
<CheckBox
title="catCalling"
checked={this.state.catCalling}
onPress={() => this.setState({ catCalling: !this.state.catCalling })}
/>
</Right>
</ListItem>
<ListItem>
<Left>
<Text>Big Puddle</Text>
</Left>
<Right>
<CheckBox
title="bigPuddle"
checked={this.state.bigPuddle}
onPress={() => this.setState({ bigPuddle: !this.state.bigPuddle })}
/>
</Right>
</ListItem>
<ListItem>
<Left>
<Text>Scaffolding</Text>
</Left>
<Right>
<CheckBox
title="scaffolding"
checked={this.state.scaffolding}
onPress={() => this.setState({ scaffolding: !this.state.scaffolding })}
/>
</Right>
</ListItem>
<ListItem>
<Left>
<Text>Sidewalk Closed</Text>
</Left>
<Right>
<CheckBox
title="sidewalkClosed"
checked={this.state.sidewalkClosed}
onPress={() => this.setState({ sidewalkClosed: !this.state.sidewalkClosed })}
/>
</Right>
</ListItem>
<ListItem>
<Left>
<Text>Lights Out</Text>
</Left>
<Right>
<CheckBox
title="lightsOut"
checked={this.state.lightsOut}
onPress={() => this.setState({ lightsOut: !this.state.lightsOut })}
/>
</Right>
</ListItem>
<ListItem>
<Left>
<Text>Snow Piles</Text>
</Left>
<Right>
<CheckBox
title="snowPiles"
checked={this.state.snowPiles}
onPress={() => this.setState({ snowPiles: !this.state.snowPiles })}
/>
</Right>
</ListItem>
</Content>
</Container>
</Modal>
<Button transparent onPress={() => this.openModal()}>
<Text style={{ color: "white" }}>Filter</Text>
</Button>
</View>
);
}
}