我想根据 React Native 中的两个 Picker 输入显示数据答案

【问题标题】：I want to display data based on two Picker input in React Native我想根据 React Native 中的两个 Picker 输入显示数据
【发布时间】：2021-11-25 09:52:56
【问题描述】：

我有两个选择器和一个按钮。

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' },
];

我如何Onclick显示所选选择器的特定结果？

说，如果我从两个选择器中选择了x1和z2 , 按钮的Onclick 我想让它输出value1

Picker 1	Picker 2	Onclick of the button
x1	x2	v1
x1	y2	v2
x1	z2	v3
y1	x2	v4
y1	y2	v5
y1	z2	v6
z1	z2	v7
z1	y2	v8
z1	z2	v9

我该如何解决这个问题？

【问题讨论】：

标签： react-native onclick picker

【解决方案1】：

这里是如何实现这一点的伪代码。您将希望提升这些值并将它们存储在某处的状态中。在这个例子中，我使用了钩子和本地组件状态。然后设置这些值，您将创建要显示的计算值。

const [picker1Value, setPicker1Value] = useState(null)

const [picker2Value, setPicker2Value] = useState(null)

const computedValue = useMemo(() => picker1Value + picker2Value, [picker1Value, picker2Value]);

<Picker values={picker2Items} value={picker1Value} onClick={setPicker1Value} />

<Picker values={picker2Items} value={picker2Value} onClick={setPicker2Value} />

<Text>{computedValue}</Text>

【讨论】：