React Native中如何基于两个Picker选中值点击按钮展示对应数据

核心思路 #

• 用状态管理两个Picker的选中值、最终输出结果
• 提前定义双Picker值到结果的映射表，点击按钮时直接查表取值即可，逻辑清晰且易维护

完整实现代码 #

import React, { useState } from 'react';
import { View, Button, Text } from 'react-native';
import { Picker } from '@react-native-picker/picker';

// 已有的Picker选项配置
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' },
];

// 双Picker值和结果的映射表
const resultMap = {
  x1: { x2: 'v1', y2: 'v2', z2: 'v3' },
  y1: { x2: 'v4', y2: 'v5', z2: 'v6' },
  z1: { x2: 'v7', y2: 'v8', z2: 'v9' }
}

const DemoPage = () => {
  // 定义三个状态：Picker1选中值、Picker2选中值、最终输出结果
  const [selected1, setSelected1] = useState(picker1Items[0].value);
  const [selected2, setSelected2] = useState(picker2Items[0].value);
  const [output, setOutput] = useState('');

  // 按钮点击事件：查表取值
  const handleButtonClick = () => {
    const targetResult = resultMap[selected1]?.[selected2] || '无匹配结果';
    setOutput(targetResult);
    // 如需直接打印/其他业务操作，直接使用targetResult即可
  }

  return (
    <View style={{ padding: 24 }}>
      {/* Picker1 组件 */}
      <Picker
        selectedValue={selected1}
        onValueChange={(val) => setSelected1(val)}
      >
        {picker1Items.map(item => (
          <Picker.Item key={item.value} label={item.label} value={item.value} />
        ))}
      </Picker>

      {/* Picker2 组件 */}
      <Picker
        selectedValue={selected2}
        onValueChange={(val) => setSelected2(val)}
        style={{ marginVertical: 12 }}
      >
        {picker2Items.map(item => (
          <Picker.Item key={item.value} label={item.label} value={item.value} />
        ))}
      </Picker>

      {/* 触发按钮 */}
      <Button title="获取结果" onPress={handleButtonClick} />

      {/* 结果展示 */}
      {output ? <Text style={{ marginTop: 20, fontSize: 16 }}>输出结果：{output}</Text> : null}
    </View>
  )
}

export default DemoPage;

说明 #

如果你使用的是其他第三方Picker组件，仅需要调整selectedValue和值变更回调的绑定逻辑即可，核心的映射表、状态管理逻辑不需要改动。后续如果需要调整映射关系，直接修改resultMap即可，不需要改动业务逻辑。

内容的提问来源于stack exchange，提问作者AFP