【问题标题】:How to identify chosen radio button value React Native?如何识别选择的单选按钮值 React Native?
【发布时间】:2021-06-03 14:24:31
【问题描述】:

我希望控制台为不同的单选按钮打印一个独特的文本。例如,如果用户选择值为 label1 的单选按钮,则控制台应打印“您选择了 label1”。该文件包含三个单选按钮及其来自不同文件的值。当按下按钮时,我将用户选择保存在异步存储中。这是我的文件:

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


【问题讨论】:

    标签: javascript reactjs react-native asyncstorage


    【解决方案1】:
    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;
    

    【讨论】:

    • @edwin 您可以使用 radioBtn.label 访问标签。希望有帮助!
    猜你喜欢
    • 1970-01-01
    • 2017-03-29
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2021-05-31
    • 1970-01-01
    • 2021-10-28
    • 2011-01-17
    相关资源
    最近更新 更多