Tengo una matriz que muestra una lista de trabajos con el botón de opción (cada uno). Si hago clic en cualquier botón de opción, quiero obtener su valor hasta ahora. Obtengo una input must be a function received undefined . ¿Cómo puedo lograr algo como esto en reaccionar nativo?
Código
import React, {useState} from 'react'; import {View, Text, TextInput, Image,Button,Body,Pressable,ScrollView,Switch} from 'react-native'; export default function Home({ navigation}){ let roles = navigation.getParam('roles') const [isEnabled, setIsEnabled] = useState(false); const toggleSwitch = () => setIsEnabled(previousState => !previousState); const handleClick = (data, e) => { alert(e.target.value, data); } <View> { Object.keys(roles).map((key) => { return ( <View> <View style={styles.XYQHC}> <Text>{roles[key]['name']}</Text> <Switch trackColor={{ false: "#767577", true: "#81b0ff" }} thumbColor={isEnabled ? "#f5dd4b" : "#f4f3f4"} ios_backgroundColor="#3e3e3e" onValueChange={toggleSwitch} value={isEnabled} /> <input type="radio" name="roles" value={roles[key]['name']} defaultChecked={roles[key]['id'] == 3 ? true : false } onClick={handleClick.bind(this, roles[key]['name'])}/> </View> </View> ) }) } </View> };Tuve que editar un poco para que funcionara y para asumir algunos datos de entrada, pero aquí hay un ejemplo funcional de su código:
import React, { useState, useEffect } from 'react'; import { View, Text, TouchableOpacity } from 'react-native'; function RadioButton({ label, onPress, selected, style }) { return ( <TouchableOpacity style={[ { flexDirection: 'row', alignItems: 'center', marginLeft: 12, marginVertical: 20, }, style, ]} onPress={onPress}> <View style={{ height: 24, width: 24, borderRadius: 12, borderWidth: 2, borderColor: '#000', alignItems: 'center', justifyContent: 'center', marginRight: 12, }}> {selected ? ( <View style={{ height: 12, width: 12, borderRadius: 6, backgroundColor: '#000', }} /> ) : null} </View> <Text>{label}</Text> </TouchableOpacity> ); } export default function Home({ navigation }) { // let status = navigation.getParam('status'); let status = 2; // let roles = navigation.getParam('roles'); let roles = [ { id: 1, name: 'lawyer', }, { id: 2, name: 'farmer', }, { id: 3, name: 'architect', }, ]; const [isEnabled, setIsEnabled] = useState(false); const [chosenRole, setChosenRole] = useState(false); useEffect(() => { roles.find((role) => { if (role.id === status) { setChosenRole(role); return true; } return false; }); }, []); const handleClick = (data) => { console.log(data); setChosenRole(data); }; return ( <View style={{ marginTop: 30 }}> {roles.map((role) => { return ( <View> <RadioButton label={role.name} selected={role.name === chosenRole.name} onPress={() => handleClick(role)} /> </View> ); })} </View> ); }