Question

我是React Native的新手。目前，我正在尝试实现以下目标：

我的应用程序包含2个选择器：1个用于放置的地方，另一个用于菜单的

“ 用餐地点”选择器包含以下选项：

 var foodPlaces=["Taco Bell","Mc Donald","TGI Friday's","Hooters"];

 <Picker
        style={{a style there}}
        mode="dropdown"
        selectedValue={this.state.selected}
        onValueChange={()=>{}}> 
        {foodPlaces.map((item, index) => {
            return (<Picker.Item label={item} value={index} key={index}/>) 
        })}
    </Picker>

现在对于每个食物场所，我都在一个数组中定义了自己的菜单：

var tacoBell = ["Enchilada","Fiesta Fries","Burrito with fries"];

var mcDonals = ["Menu 1,"Menu 2","Menu 3"];

等等。

我要实现的目标是，根据用户在第一个选择器中选择的用餐地点，他们将在第二个“ 菜单”选择器中看到相应的菜单。这两个选择器都在同一页面/屏幕上。

我的问题是：那是否可能，如果可以的话，我该如何实现呢？

非常感谢您。

Answer 1

只需将选择器视为一种视觉表示。选择器中没有存储任何值，因此您无法从中检索项目。

相反，您需要做的是将所选值存储在您的状态中：

因此，对于您的就餐场所，您可以这样做：

selectedValue={this.state.selectedPlace}
onValueChange={ value => this.setState({ selectedPlace: value })}>

对于您的菜单，您可以这样做：

selectedValue={this.state.selectedMenu}
onValueChange={ value => this.setState({ selectedMenu: value })}>

现在，在您的代码中，您可以将这些值引用为this.state.selectedPlace和this.state.selectedMenu并相应地对其进行响应。

例如，我想到的最简单的方法是让一个对象的键等于您餐厅名称的键

const menus = {
  "Taco Bell": ["Enchilada", "Fiesta Fries", "Burrito with fries"]
}

只要这些属性名称与传递给选择器的值完全相同，您就可以为第二个选择器执行以下操作：

render(){
  const { selectedPlace, selectedMenu } = this.state
  return (
    <Your Picker Coder .... >
    <Picker
      //your props>
    {menus[this.state.selectedPlace].map(menu => <Picker.Item ... />)}
    </Picker>
  )
}

希望有帮助！

根据选择的值在选择器中设置正确的变量

1 个答案: