简体   繁体   English

如何识别选择的单选按钮值 React Native?

[英]How to identify chosen radio button value React Native?

I would like the console to print a unique text for the different radio buttons.我希望控制台为不同的单选按钮打印一个独特的文本。 For example if the user chooses the radio button valued label1, the console should print 'You chose label1'.例如,如果用户选择值为 label1 的单选按钮,则控制台应打印“您选择了 label1”。 The file contains three radio buttons and their values that are from a different file.该文件包含三个单选按钮及其来自不同文件的值。 I save the users choice in a asyncstorage, when the button is pressed.当按下按钮时,我将用户选择保存在异步存储中。 This is my file:这是我的文件:

import RadioButtonRN from 'radio-buttons-react-native';
import AsyncStorage from '@react-native-async-storage/async-storage';
import {Questions} from '../questions/questions_user'

export const ScreenOne = ({ }) => {
  const navigation = useNavigation();

  const question3 = Questions[2].question;
  const label1 = Questions[2].answers[0].answer;
  const label2 = Questions[2].answers[1].answer;
  const label3 = Questions[2].answers[2].answer;

  const [radioBtn, setSelectedRadioBtn] = useState('')

  const saveValue = () => {
    if (radioBtn) {
      AsyncStorage.setItem('radioValue', JSON.stringify(radioBtn))
      setSelectedRadioBtn('');
    } 
  }

  const data = [
    {
      label: label1
    },
    {
      label: label2
    },
    {
      label: label3
    }
  ];

  return (
    <ScreenContainer>
        <RadioButtonRN
          data={data}
          selectedBtn={(e) => setSelectedRadioBtn(e)}
          box={false}
          circleSize={14}
          activeColor={'#6175CF'}
          style={styles.radio}
        />
      </InputArea>
          <Button onPress={saveValue} />
    </ScreenContainer>
  )
}

export default ScreenOne


import AsyncStorage from '@react-native-async-storage/async-storage';
import {Questions} from '../questions/questions_user'

export const ScreenOne = ({ }) => {
  const navigation = useNavigation();

  const question3 = Questions[2].question;
  const label1 = Questions[2].answers[0].answer;
  const label2 = Questions[2].answers[1].answer;
  const label3 = Questions[2].answers[2].answer;

  const [radioBtn, setSelectedRadioBtn] = useState('')

  const saveValue = () => {
    if (radioBtn) {
      AsyncStorage.setItem('radioValue', JSON.stringify(radioBtn))
      setSelectedRadioBtn('');
    } 
  }

  const data = [
    {
      label: label1
    },
    {
      label: label2
    },
    {
      label: label3
    }
  ];

  return (
    <ScreenContainer>
        <RadioButtonRN
          data={data}
          selectedBtn={(e) => setSelectedRadioBtn(e)}
          box={false}
          circleSize={14}
          activeColor={'#6175CF'}
          style={styles.radio}
        />
      </InputArea>
          <Button onPress={saveValue} />

       <Text>{radioBtn.label}</Text>

    </ScreenContainer>
  )
}

export default ScreenOne;

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM