javascript - 如何识别选择的单选按钮值 React Native?
问题描述
我希望控制台为不同的单选按钮打印一个独特的文本。例如,如果用户选择值为 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
解决方案
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;
推荐阅读
- bash - RTNETLINK 回答:设备或资源繁忙
- python - 当我尝试 unpickle 文件时,我在 Python 2.7.9 中不断收到 EOF 错误
- react-redux - react-redux useSelector 告诉“Uncaught TypeError: Object(...) is not a function”
- react-admin - 我可以在 ReactAdmin 应用栏中显示过滤器设置吗?
- r - dplyr 不会安装在我的 R 中。这是怎么回事?
- python-3.x - 使用 Raptor 比较两个 RDF/XML 文件并产生差异?
- javascript - 如何更改对象键值?
- c++ - 制作数组时调用了太多次析构函数
- php - 在服务器上的两个站点/帐户之间复制文件的问题
- windows - 如何删除目录中的重复文件和次要文件