Реагировать на множественный выбор, не могу выбрать несколько значений - PullRequest
Новая
       11

Реагировать на множественный выбор, не могу выбрать несколько значений

0 голосов
/ 21 января 2020

У меня есть API, который преобразуется в массив объектов, что-то вроде этого 

[
{flagUrl : 'http://....' , name : India , id : 7},
{flagUrl : 'http://....' , name : USA , id : 2},
{flagUrl : 'http://....' , name : Australia , id : 8},
....
]

, а затем я использую https://www.npmjs.com/package/react-native-select-multiple, этот пакет, чтобы сделать множественный выбор ссылка из списка сверху.

Я хочу, во-первых, я могу отобразить список стран, в которых пользователь может выбрать, скажем, две страны (я могу контролировать максимальный выбор с предоставленной реквизитом), а затем я хочу, когда пользователь переходит на следующую страницу, я могу узнать, какой идентификатор был выбран пользователем на предыдущем экране. В настоящее время я пытался показать то же самое, и это просто список стран, которые я могу показать прямо сейчас, и тогда я не могу получить их идентификаторы. Вот что я попробовал до сих пор 

<SelectMultiple
        items={this.state.countryList.map((x) => x.name)}
        selectedItems={this.state.selectedCountries}
        onSelectionsChange={this.onSelectionsChange}
        maxSelect={2}
        />

, где у моего countrylist есть вышеуказанный массив, и вот функции, которые я использовал 

onSelectionsChange = (selectedCountries) => {
    this.setState({ selectedCountries })
  }

, а selectedItems это просто пустой массив в моем штате.

Так что я просто хочу отобразить список стран, пользователь выбирает несколько из них, а затем я могу отправить выбранные идентификаторы страны на следующий экран с помощью this.props.navigate... Дайте мне знать, если вы нужна дополнительная информация по этому вопросу. Заранее спасибо:)

1 Ответ

1 голос
/ 21 января 2020

Ваш список стран должен иметь метку и значение, подобное 

 <SelectMultiple
     items={this.state.countryList.map((x) => ({ name: x.name, value:x.id })}
     selectedItems={this.state.selectedCountries}
     onSelectionsChange={this.onSelectionsChange}
     maxSelect={2}
 />

метод onSelectionsChange должен быть таким же 

onSelectionsChange = (selectedCountries) => {
    this.setState({ selectedCountries })
}

Затем, когда вы хотите перейти на другой экран, тогда 

 moveToAnotherPage =() => {
   const { selectedCountries } = this.state;
   const { navigation } = this.props;
   const ids = selectedCountries.map(item => item.value);
   navigation.navigate('ScreenName', {ids});
  }
...