Установите правильную переменную в пике в зависимости от выбранного значения

Question

Я новичок в родной реакции.В настоящее время я пытаюсь добиться следующего:

Мое приложение содержит 2 средства выбора: 1 для мест для ea t и другое для меню

Сборщик " Еда мест " содержит следующие параметры:

 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"];

и т. д.

Я пытаюсь добиться того, чтобы в зависимости от того, какие места приема пищи пользователь выбрал в первом окне выбора, они увидят его соответствующее меню ввторой сборщик « menu ».Оба этих сборщика находятся на одной странице / экране.

Мой вопрос: возможно ли это, и если да, то как мне этого добиться?

Большое спасибо.

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>
  )
}

Надеюсь, это поможет!