![](/img/trans.png)
[英]How to select only one checkbox instead of being able to select more than one? (react)
[英]How to only select one checkbox in a React Native Android app?
我正在尝试在 React Native 中设置我的第一个 Android 应用程序。
现在有这张卡片(react-native-component),里面有多个复选框(见下面的代码)。
每次我尝试只选择一个复选框时,它都会以某种方式检查所有复选框。
我知道它与多个状态有关,但我无法让它发挥作用。
如何只选择一个复选框?
JavaScript 文件:
import React from "react";
import {StyleSheet, ActivityIndicator, ListView, Text, View, Alert, Platform, TouchableOpacity} from 'react-native';
import { Card, CheckBox, Button } from 'react-native-elements';
export default class AgendaItemVote extends React.Component {
constructor(props) {
super(props);
this.state = { checked: false };
}
render(){
return(
<View style={styles.container}>
<Card title="Titel Agendapunt">
<Text style={styles.paragraph}>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus at sapien at tellus interdum finibus. Nunc sagittis tincidunt orci, non viverra ligula feugiat id. Phasellus eleifend massa neque, eu scelerisque enim feugiat ac.
</Text>
<View style={{flexDirection: 'row'}}>
<CheckBox
title='Ja'
checked={this.state.checked}
onPress={() => this.setState({
checked: !this.state.checked
})}
/>
<CheckBox
title='Nee'
checked={this.state.checked}
onPress={() => this.setState({
checked: !this.state.checked
})}
/>
<CheckBox
title='Onthouding'
checked={this.state.checked}
onPress={() => this.setState({
checked: !this.state.checked
})}
/>
</View>
<View>
<Button
title="Indienen"
/>
</View>
</Card>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
paddingTop: 40,
backgroundColor: '#ecf0f1',
},
paragraph: {
margin: 24,
fontSize: 18,
fontWeight: 'bold',
textAlign: 'center',
color: '#34495e',
},
});
每个控件都必须有一个特定的状态。 有一个解决方案:
export default class AgendaItemVote extends React.Component {
constructor(props) {
super(props);
this.state = {
options: [
{
title: 'Ja',
checked: false
},
{
title: 'Nee',
checked: false
},
{
title: 'Onthouding',
checked: false
}
]
};
}
render() {
return (
<View style={styles.container}>
<Card title="Titel Agendapunt">
<Text style={styles.paragraph}>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Vivamus at sapien at tellus interdum finibus. Nunc
sagittis tincidunt orci, non viverra ligula feugiat id.
Phasellus eleifend massa neque, eu scelerisque enim
feugiat ac.
</Text>
<View style={{ flexDirection: 'row' }}>
{this.state.options.map(opt => (
<CheckBox
title={opt.title}
checked={opt.checked}
key={opt.title}
onClick={() => {
opt.checked = !opt.checked;
this.setState({
options: [
...this.state.options
]
})
}
</View>
<View>
<Button title="Indienen" />
</View>
</Card>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
paddingTop: 40,
backgroundColor: '#ecf0f1'
},
paragraph: {
margin: 24,
fontSize: 18,
fontWeight: 'bold',
textAlign: 'center',
color: '#34495e'
}
});
问题就在这里,
checked={this.state.checked}
当您将checked
设置为true
,当您在每个复选框中将此值用于this.state.checked
,每个复选框都会被选中。
从所有checkboxes
删除checked
和onPress
,如果您想获取选中checkbox
的值,则可以使用ref
。
供您参考: 在 React 中使用 ref 获取复选框的值
我有一个类似的问题,解决问题后,我在这里写我的答案。
考虑下面的例子 - (带钩子)
const checkboxComponent = () => {
const [checkboxValue, setCheckboxValue] = React.useState([
{ label: 'Customer', value: 'customer', checked: false },
{ label: 'Merchant', value: 'merchant', checked: false },
{ label: 'None', value: 'none', checked: false },
])
const checkboxHandler = (value, index) => {
const newValue = checkboxValue.map((checkbox, i) => {
if (i !== index)
return {
...checkbox,
checked: false,
}
if (i === index) {
const item = {
...checkbox,
checked: !checkbox.checked,
}
return item
}
return checkbox
})
setCheckboxValue(newValue)
}
return (
<View>
{checkboxValue.map((checkbox, i) => (
<View style={styles.checkboxContainer} key={i}>
<CheckBox
value={checkbox.checked}
onValueChange={(value) => checkboxHandler(value, i)}
/>
<Text style={styles.label}>{checkbox.label}</Text>
</View>
))}
</View>
)
}
export default checkboxComponent
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.