如何在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;

Radio Button Image

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）