Как мне установить idState, когда имя выбрано в выпадающем списке? - PullRequest
Новая
       22

Как мне установить idState, когда имя выбрано в выпадающем списке?

0 голосов
/ 30 мая 2019

У меня есть массив json в следующем формате 

  this.state = {
    allTeachers: [
        {
            "id": "qKUd5GoBwpolnxM4upjo",
            "name": "XYZ",
            "subject": "Science"
        },
        {
            "id": "qaUe5GoBwkrtnxM4kOip",
            "name": "Vidya",
            "subject": "Mathematics"
        }
    ]
  }

И я использую приведенный ниже код для раскрывающегося списка.Теперь я могу установитьState имя, но я хочу, чтобы показать имя в раскрывающемся списке, и установить соответствующий идентификатор выбранного имени.Я использую сборщик реакционной смеси.Как я могу это сделать? 

<View style ={styles.dropdownInput}>
{
    <Picker
        selectedValue={this.state.teacher_name}
        style={styles.pickerCss}
        onValueChange={(itemValue, itemIndex) => this.setState({teacher_name: itemValue})}
    >
    <Picker.Item label='Select Teacher' value='0' />
    {
        this.state.allteachers ?
            this.state.allteachers.map((item,key) => (
                <Picker.Item label={item.name} value={item.name} />
            ))
        :
        false
    }
    </Picker>
}
</View>

1 Ответ

1 голос
/ 30 мая 2019

Вам просто нужно установить значение PickerItem для соответствующего идентификатора.Это означает изменение: 

<Picker.Item label={item.name} value={item.name} />

на 

<Picker.Item label={item.name} value={item.id} />

Теперь 

onValueChange={(itemValue, itemIndex) => this.setState({teacher_name: itemValue})}

сохраняет teacher_id в переменной состояния teacher_name.Вы можете создать новую переменную состояния с именем teacher_id в своем конструкторе и сохранить там идентификатор.

Кроме того , я бы порекомендовал небольшой рефакторинг.Вместо: 

{
    // btw here is a typo your array is called allTeachers
    this.state.allteachers ?
        this.state.allteachers.map((item,key) => (
            <Picker.Item label={item.name} value={item.name} />
        ))
    :
    false
}

я бы создал функцию renderPickterItems: 

renderPickerItems(allTeachers){
    if (allTeachers) {
       return(
        allTeachers.map((item,key) => (
        <Picker.Item label={item.name} value={item.id} />
        ))
    );
    }   
  }

, которую можно вызвать с помощью: 

 <Picker.Item label='Select Teacher' value='0' />
    {this.renderPickerItems(this.state.allTeachers)}
 </Picker>

Полный рабочий пример:

https://snack.expo.io/HJwLcXT6E

...