![](/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.