React native 如何在React native中获取RadioGroup中的选定项?

React native 如何在React native中获取RadioGroup中的选定项?,react-native,React Native,如何从RadioGroup中获取选定值 state = { gender: '', data: [ { label: 'male', value: "Male", }, { label: 'female', value: "Female",

如何从RadioGroup中获取选定值

state = {
        gender: '',

        data: [
            {
                label: 'male',
                value: "Male",
            },
            {
                label: 'female',
                value: "Female",
            }
        ],
    }

render() {
        return (

               <View style={styles.radioGroupContainer}>

                        <Text style={styles.textLableStyle}>Select Gender</Text>

                        <RadioGroup style={alignItems = 'flex-start'} 
                                    radioButtons={this.state.data} 
                        onPress={
                            this.onPress
                            } />

                    </View>

               )
         }

注意:在选择单选按钮时,我需要性别变量中的值。

使放射组像这样,只给出放射组标签。通过输入代码,您将获得性别状态下的值

<RadioGroup style={alignItems = 'flex-start'} 
    radioButtons={this.state.data} 
    onPress={data => this.setState({gender: data })} />
通过在项目根目录中输入以下命令来安装

npm i react-native-radio-buttons-group --save
基本用法


它像[object object],[object object]那样打印,尝试这样做,并检查在控制台中得到的结果,onPress={data=>console.logdata}它打印整个数据数组,而不是所选的数据值。在按下RadioGroup时,您会得到哪些数据?实际上,当在RadioGroup中选择单选按钮时,我不知道如何打印实际值。您可以共享RadioGroup的实现代码吗?这是除了其他设计视图之外的所有代码。
import React, { Component } from 'react';
import { Text, View, StyleSheet } from 'react-native';

import RadioGroup from 'react-native-radio-buttons-group';

export default class Vertical extends Component {
  state = {
    data: [
      {
        label: 'Default value is same as label',
      },
      {
        label: 'Value is different',
        value: "I'm not same as label",
      },
      {
        label: 'Color',
        color: 'green',
      },
      {
        disabled: true,
        label: 'Disabled',
      },
      {
        label: 'Size',
        size: 32,
      },
    ],
  };

  // update state
  onPress = data => this.setState({ data });

  render() {
    let selectedButton = this.state.data.find(e => e.selected == true);
    selectedButton = selectedButton ? selectedButton.value : this.state.data[0].label;
    return (
      <View style={styles.container}>
        <Text style={{ fontSize: 18, marginBottom: 50 }}>
          Value = {selectedButton}
        </Text>
        <RadioGroup radioButtons={this.state.data} onPress={this.onPress} />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
});