0

Estoy haciendo unos botones para una encuesta, pero al momento de seleccionar uno automáticamente me cambian todos, podría crear un useState para cada uno de los radioButton.group pero no creo que sea una buena solución, no se si con un reducer pueda ser optimo. alguna ayuda de como solucionar esto de una manera optima?

export const EncuestaScreen = () => {

  const [value, setValue] = React.useState('first');

  return ( 
   <ScrollView style={{backgroundColor:"#E1D1F7"}}>
          <View style={{  alignContent: 'center' }}>
            <Text>¿Te culpa por sus cambios de ánimo, malestares, o frustraciones propias?</Text>
            <RadioButton.Group onValueChange={value => setValue(value)} value={value} >
              <RadioButton.Item label="Nunca" value="first" />
              <RadioButton.Item label="En ocasiones" value="second" />
              <RadioButton.Item label="Casi siempre" value="three" />
            </RadioButton.Group>
            <Text>¿Te amenaza o chantajea?</Text>
            <RadioButton.Group onValueChange={value => setValue(value)} value={value}>
              <RadioButton.Item label="Nunca" value="first" />
              <RadioButton.Item label="En ocasiones" value="second" />
              <RadioButton.Item label="Casi siempre" value="three" />
            </RadioButton.Group>
            </View>
     </ScrollView> 

1 respuesta 1

0

que librería estas utilizando, para saber las props que están disponibles. Tengo una idea de como se podría hacer pero sin saber la librería puede que no te funcione el código.

aqui estoy utilizando RadioButtom de React Native Paper

import { RadioButton } from 'react-native-paper';

y declaro mi estado asi:

const [encuesta, setEncuesta] = useState({
    pregunta1: '',
    pregunta2: '',
    pregunta3: '',
  });

const { pregunta1, pregunta2, pregunta3 } = encuesta;

para leer los datos del input creo la siguiente funcion:

const handleChangePregunta = (pregunta, valor) => {
  setEncuesta({
    ...encuesta,
    [pregunta]: valor
  })
}

primero utilizo el spread operator, esto me sirve para mantener los valores del estado y no perder las respuestas / selecciones de inputs anteriores. y recibiendo los parámetros pregunta y valor los cuales utilizo para poder asignar las respuestas, la variable valor me la da react-native-paper

luego utilizo el componente RadioButton

<ScrollView style={{ backgroundColor: "red" }}>
    <View style={{ alignContent: 'center' }}>
      <Text>¿Te culpa por sus cambios de ánimo, malestares, o frustraciones propias?</Text>
      <RadioButton.Group onValueChange={value => handleChangePregunta('pregunta1', value)} value={pregunta1} >
        <RadioButton.Item label="Nunca" value="first" />
        <RadioButton.Item label="En ocasiones" value="second" />
        <RadioButton.Item label="Casi siempre" value="three" />
      </RadioButton.Group>
      <Text>¿Te amenaza o chantajea?</Text>
      <RadioButton.Group onValueChange={value => handleChangePregunta('pregunta2', value)} value={pregunta2} >
        <RadioButton.Item label="Nunca" value="first" />
        <RadioButton.Item label="En ocasiones" value="second" />
        <RadioButton.Item label="Casi siempre" value="three" />
      </RadioButton.Group>
      <Text>¿Otra pregunta Aqui?</Text>
      <RadioButton.Group onValueChange={value => handleChangePregunta('pregunta3', value)} value={pregunta3} >
        <RadioButton.Item label="Nunca" value="first" />
        <RadioButton.Item label="En ocasiones" value="second" />
        <RadioButton.Item label="Casi siempre" value="three" />
      </RadioButton.Group>
    </View>
  </ScrollView>

Te dejo una captura de como se ve Encuesta con Estado reutilizable

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.