Как определить выбранное значение переключателя React Native?

Я хочу, чтобы консоль печатала уникальный текст для разных переключателей. Например, если пользователь выбирает радиокнопку со значением label1, консоль должна напечатать «Вы выбрали label1». Файл содержит три переключателя и их значения из другого файла. Я сохраняю выбор пользователя в asyncstorage при нажатии кнопки. Это мой файл:

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


# react-native asyncstorage
Источник
Codelisting
за 0 против
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;
  • 0
    @edwin вы можете получить доступ к метке с помощью radioBtn.label. Надеюсь, это поможет!
Codelisting
Популярные категории
На заметку программисту