在以下 React-native 代码中，我使用了 native 基础复选框来考虑的函数是 _checkBox() 和 _checkbox_check()
我使用状态变量来保存值，无论它们是否处于状态 cb{}
按下复选框后，我可以更改在 _checkbox_check() 函数中使用 console.log() 检查的值，但其值是not workinkg at checked={this.state.cb[data.id]} 这意味着对象 cb 中对应于复选框键的 true 和 false 存在，但是当其为 true 时，复选框被选中，
虽然我已经检查过提供诸如 checked={true} 这样的静态值，但它工作得很好。
如果有错误或需要改进的地方请提出建议 我的整个页面的代码如下
import React from "react";
import AsyncStorage from "@react-native-community/async-storage";
import {
Text,
View,
ScrollView,
Platform,
Image,
TouchableOpacity,
ToastAndroid,
StatusBar
} from "react-native";
import {
Content,
Container,
Button,
Icon,
Header,
Left,
Right,
Body,
Title,
Item,
Card,
CardItem,
DatePicker,
Label,
Input,
ListItem,
CheckBox
} from "native-base";
import Network from "../../network/network";
import LinearGradient from "react-native-linear-gradient";
import * as constant from "../../Constants/Constant";
const deviceHeight = constant.deviceHeight;
const deviceWidth = constant.deviceWidth;
import styles from "./Styles";
import Styles from "./Styles";
const icn = "../../Images/icons/blue/";
const platform = Platform.OS;
export default class SignInScreen extends React.Component {
constructor(props) {
super(props);
this.state = {
services: null,
poolId: null,
chosenDate: new Date(),
choice: null,
description: null,
val: true,
cb: {}
};
this.setDate = this.setDate.bind(this);
}
setDate(newDate) {
this.setState({ chosenDate: newDate });
}
async componentWillMount() {
await Network.Token_get("apk/getServiceList", async response => {
if (response.status == true) {
await this.setState({
services: response.serviceData
});
}
});
}
componentDidMount() {
const { navigation } = this.props;
const itemId = navigation.getParam("id");
this.setState({
poolId: itemId
});
}
render() {
return (
<Container>
<Header
style={{
borderBottomWidth: 0,
justifyContent: "center",
alignItem: "center"
}}
>
<Left>
<Button
transparent
onPress={() => {
this.props.navigation.openDrawer();
}}
>
<Icon name="menu" />
</Button>
</Left>
<Body>
<Title style={styles.title}>Service Details</Title>
</Body>
<Right>
<Button transparent onPress={() => this._signOutAsync()}>
<Icon name="log-out" />
</Button>
</Right>
</Header>
<Content contentContainerStyle={styles.content} bounces={false}>
<ScrollView
contentContainerStyle={{
padding: 10,
alignItems: "flex-start",
justifyContent: "center",
backgroundColor: "#ffff",
shadowColor: "#1C0C59",
shadowOffsetWidth: 3,
shadowOffsetHeight: 3,
shadowOpacity: 0.1,
shadowRadius: 3,
elevation: 3,
borderRadius: 7,
bgColor: "#ffffff"
}}
>
<View
style={{ alignItems: "flex-start", justifyContent: "flex-start" }}
>
{this._checkBoxes()}
</View>
<View style={{ flexDirection: "row" }}>
<View>
<Text style={{ top: 10 }}>
Schedule Date:
{/* {this.state.chosenDate.toString().substr(4, 12)} */}
</Text>
</View>
<View>
<DatePicker
defaultDate={new Date(2018, 4, 4)}
minimumDate={new Date(2018, 1, 1)}
maximumDate={new Date(2018, 12, 31)}
locale={"en"}
timeZoneOffsetInMinutes={undefined}
modalTransparent={false}
animationType={"fade"}
androidMode={"default"}
placeHolderText="Select Schedule Date"
// textStyle={{ color: "green" }}
placeHolderTextStyle={{ color: "#d3d3d3" }}
onDateChange={this.setDate}
disabled={false}
/>
</View>
</View>
<Item floatingLabel style={{ marginTop: 20, marginBottom: 50 }}>
<Label>Description</Label>
<Input
multiline={true}
// style={{height:200, textColor: "#000"}}
style={{ color: "#000", height: 100 }}
onChangeText={description => this.setState({ description })}
/>
</Item>
<Button
rounded
primary
onPress={() => this._submit()}
style={{ paddingLeft: 18, alignSelf: "center" }}
>
<Text style={{ fontWeight: "600", color: "#000" }}>Submit</Text>
<Icon name="send" />
</Button>
</ScrollView>
</Content>
</Container>
);
}
mapPools(poolList) {
if (poolList) {
return poolList.map(data => {
return (
<Card style={{ borderRadius: 7 }}>
<CardItem style={{ borderRadius: 7 }}>
<TouchableOpacity>
<View style={styles.View_inside_card}>
<View style={styles.Incard_icon_View}>
<Image
source={require(icn + "swimmingPool.png")}
style={styles.Incard_icon}
/>
</View>
<View style={styles.Incard_Detail_View}>
<Text style={styles.Detail_name}>{data.pool_title}</Text>
<Text style={styles.Detail_name}>{data.address}</Text>
</View>
</View>
</TouchableOpacity>
</CardItem>
</Card>
);
});
}
}
_signOutAsync = async () => {
var loginid = await AsyncStorage.getItem("@LoginID");
payload = {
loginId: loginid
};
await Network.Token_put("apk/logout", payload, async response => {
ToastAndroid.show(response.message, ToastAndroid.SHORT);
if (response.status === true) {
await AsyncStorage.clear();
this.props.navigation.navigate("Auth");
}
});
// await AsyncStorage.clear();
// this.props.navigation.navigate("Auth");
};
_checkBoxes = () => {
if (this.state.services) {
return this.state.services.map(data => {
return (
<ListItem noBorder>
<CheckBox
checked={this.state.cb[data.id]}
onPress={() => this._chkbox_check(data.id)}
/>
<Text style={{ marginLeft: 20 }}>{data.services_title}</Text>
</ListItem>
);
});
}
};
_chkbox_check = param => {
console.log(param, this.state.cb);
if (this.state.cb.hasOwnProperty(param)) {
var element = this.state.cb[param];
console.log(element);
this.state.cb[param] = !element;
element = this.state.cb[param];
console.log(element);
} else {
this.state.cb[param] = true;
}
};
_submit = async sd => {
var payload = {
pool_id: this.state.poolId,
request_schedule_dateTime: this.state.chosenDate,
request_details: this.state.description,
service_type_id: this.state.choice
};
var url = "apk/createPoolRequest";
console.log("payload=>", payload);
await Network.Token_post(url, payload, async response => {
ToastAndroid.show(response.message, ToastAndroid.SHORT);
if (response.status === true) {
this.props.navigation.pop();
}
});
};
}
最佳答案
修改组件状态时应该使用setState:
_chkbox_check = param => {
if (this.state.cb.hasOwnProperty(param)) {
var element = this.state.cb[param];
this.setState({
cb: {
...this.state.cb,
[param]: !element,
},
});
} else {
this.setState({
cb: {
...this.state.cb,
[param]: true,
},
});
}
}
根据文档，直接修改状态是一个很大的禁忌。原因有多种，但您遇到的问题是因为在调用 setState() 之前不会触发 render() 。
在上面的代码中，setState只会修改cb状态，但是因为你不想完全覆盖cb(因为它存储多个复选框的选中状态)，您必须与 spread operator 合并...，然后访问 dynamic key将其括在方括号[]中。
这是一个删除了所有不相关代码的工作示例:
import React from 'react';
import { View } from 'react-native';
import { ListItem, CheckBox } from 'native-base';
export default class SignInScreen extends React.Component {
constructor(props) {
super(props);
this.state = {
cb: {}
};
}
render() {
return (
<View>
{this._checkBoxes()}
</View>
);
}
_checkBoxes = () => {
const services = [
{ id: 'service1' },
{ id: 'service2' },
{ id: 'service3' },
];
return services.map(data => {
return (
<ListItem noBorder>
<CheckBox
checked={this.state.cb[data.id]}
onPress={() => this._chkbox_check(data.id)}
/>
</ListItem>
);
});
}
_chkbox_check = param => {
if (this.state.cb.hasOwnProperty(param)) {
var element = this.state.cb[param];
this.setState({
cb: {
...this.state.cb,
[param]: !element,
},
});
} else {
this.setState({
cb: {
...this.state.cb,
[param]: true,
},
});
}
}
}
如果在 setState 中省略 ...this.state.cb 行，则 cb 将被新的完全覆盖值。
例如，假设您从以下内容开始:
state.cb = { service1: true }
然后调用_chkbox_check('service2');，您将得到:
state.cb = { service2: true }
但是使用展开运算符，您将得到:
state.cb = { service1: true, service2: true }
旁注
您的 _chkbox_check 函数可以通过不检查状态中的属性来简化:
_chkbox_check = param => {
this.setState({
cb: {
...this.state.cb,
[param]: !this.state.cb[param],
},
});
}
这是因为JS使用truthy values ，因此 undefined 将被解释为 false。
关于javascript - 如何设置复选框中的选中值，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56407349/