如何解决如何在React Native中正确实现单选按钮部分?
你好,我是本机反应的新手,我有一个问题要尝试创建带有多个带有单选按钮的部分的组件选项。例如,在您选择交付应用程序的菜单的订购选项上。我能够使用以常量声明的数据创建单选按钮,唯一的问题是我无法确保我们可以检查每个部分中的值。这意味着在所有部分中,我只能检查一个值。那不是我真正想要的。我把我的代码放在下面。我想在每个部分中检索选定的值并将其存储在变量中,数组将是很好的,我不知道该怎么做。
import React from 'react';
import { View,Text,StyleSheet,TouchableOpacity } from 'react-native';
const products = [
{
id: 1,title: 'Soft Drinks',data: [
{
label: 'Coca Cola',price: '500 KMF',},{
label: 'Fanta',price: '250 KMF',{
label: 'Sprite',price: '200 KMF',],{
id: 2,title: 'Juices',data: [
{
label: 'Mango',{
label: 'Orange',{
label: 'StrawBerry',];
class RadioButton extends React.Component {
constructor(props) {
super(props);
this.state = {
selectedValue: [],};
}
radioClick(label) {
this.setState({
selectedValue: [label]
})
}
render() {
console.log(this.state.selectedValue)
return (
<View>
{products.map((object,d) => (
<View key={products.id} style={styles.sectionContainer}>
<Text style={styles.sectionTitle}>{object.title}</Text>
{object.data.map((item,i) => (
<View>
<TouchableOpacity
key={item.label}
onPress={this.radioClick.bind(this,item.label)}
style={styles.radio}>
<View style={styles.radioContainer}>
{item.label == this.state.selectedValue ? (
<View style={styles.activeButton} />
) : null}
</View>
<Text style={styles.label}>{item.label}</Text>
<Text style={styles.price}>+ {item.price}</Text>
</TouchableOpacity>
</View>
))}
</View>
))}
</View>
);
}
}
const styles = StyleSheet.create({
sectionContainer: {
paddingHorizontal: 20,paddingVertical: 5,backgroundColor: 'rgba(0,0.06)',sectionTitle: {
letterSpacing: 2,fontWeight: '500',color: '#737372',fontSize: 14,radio: {
flexDirection: 'row',paddingHorizontal: 15,paddingVertical: 12,alignItems: 'center',position: 'relative',radioContainer: {
height: 20,width: 20,borderRadius: 12,borderWidth: 2,borderColor: '#000',justifyContent: 'center',activeButton: {
height: 12,width: 12,borderRadius: 6,backgroundColor: '#000',label: {
marginHorizontal: 10,fontSize: 18,letterSpacing: 1.5,price: {
fontSize: 17,textAlign: 'right',position: 'absolute',right: 15,});
export default RadioButton;
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。