Quiero mostrar datos basados en dos entradas Picker en React Native.

Answer

1. 

   davy.ai

   June 4, 2023 at 10:30 am

   Para resolver este problema, puede crear una función que se activará en el evento onclick del botón. Esta función tomará los valores seleccionados de los dos selectores y los comparará con el valor de salida correspondiente.

   Aquí hay un ejemplo de código que puede lograr esto:

   import React, { useState } from 'react';
   import { View, Text, Button, Picker } from 'react-native';
   
   const picker1Items = [
     { label: "x1", value: 'x1' },
     { label: "y1", value: 'y1' },
     { label: "z1", value: 'z1' },
   ];
   
   const picker2Items = [
     { label: "x2", value: 'x2' },
     { label: "y2", value: 'y2' },
     { label: "z2", value: 'z2' },
   ];
   
   const valueMap = {
     'x1x2': 'v1',
     'x1y2': 'v2',
     'x1z2': 'v3',
     'y1x2': 'v4',
     'y1y2': 'v5',
     'y1z2': 'v6',
     'z1x2': 'v7',
     'z1y2': 'v8',
     'z1z2': 'v9',
   };
   
   const App = () => {
     const [picker1Value, setPicker1Value] = useState(picker1Items[0].value);
     const [picker2Value, setPicker2Value] = useState(picker2Items[0].value);
     const [result, setResult] = useState('');
   
     const onButtonClick = () => {
       const key = `${picker1Value}${picker2Value}`;
       const outputValue = valueMap[key];
       setResult(outputValue);
     };
   
     return (
       <view>
         <text>Selector 1</text>
         <picker selectedvalue="{picker1Value}" onvaluechange="{(value)" ==""> setPicker1Value(value)}
         >
           {picker1Items.map((item) => (
             <picker.item key="{item.value}" label="{item.label}" value="{item.value}"></picker.item>
           ))}
         </picker>
   
         <text>Selector 2</text>
         <picker selectedvalue="{picker2Value}" onvaluechange="{(value)" ==""> setPicker2Value(value)}
         >
           {picker2Items.map((item) => (
             <picker.item key="{item.value}" label="{item.label}" value="{item.value}"></picker.item>
           ))}
         </picker>
   
         <button title="Haz click" onpress="{onButtonClick}"></button>
   
         <text>Resultado: {result}</text>
       </view>
     );
   };
   
   export default App;
   

   En este ejemplo, hemos creado un objeto valueMap que asigna los valores seleccionados de los dos selectores a los valores de salida. También tenemos dos variables de estado picker1Value ypicker2Value para guardar los valores seleccionados de los dos selectores. La función onButtonClick toma los dos valores del selector y los asigna a una clave que se utiliza para obtener el valor de salida correspondiente del objeto valueMap. El valor de salida se almacena en la variable de estado result, que se muestra en la interfaz de usuario.

   El componente Selector de react-native se utiliza para crear los dos selectores para seleccionar los valores. El componente Button se utiliza para activar la función onButtonClick en el clic. El componente Text se utiliza para mostrar el resultado en la interfaz de usuario.

   Al utilizar este código, puede lograr la funcionalidad deseada de mostrar un resultado específico para los selectores seleccionados en el clic del botón.

Comments are closed.