React-Select v2 поиск через запятую - PullRequest
5 голосов
/ 15 октября 2019

Есть ли способ с response-select v2 для поиска нескольких значений одновременно? Как будто я мог вставить пользователя в список значений, разделенных запятыми или пробелами, и элементы, соответствующие этим результатам, отобразились бы в раскрывающемся списке.

Пример реагирования-выбора (мы называем их средствами выбора элементов):

<StyledFormItemPicker
          className="emailPicker"
          filterKeys={['label']}
          label="email picker"
          value={emailPickerValue}
          onChange={value => onEmailPickerChange(value)}
          items={users}
          isMulti={true}
        />

onChange code:

// allow user to pass in comma separated list to search
export const onEmailPickerChange = props => event => {
  event.persist();
  // split event (value) on space or comma
  // push to an array
  // set that array of strings as the value and see all results?
};

1 Ответ

1 голос
/ 15 октября 2019

Таким образом, чтобы добиться вашей функции, я бы использовал реквизит filterOption.

const filterOption = ({ label, value }, string) => {
  if(string === "") return true;

  const parsedString = string.split(/[, ]+/);
  for (const string of parsedString) {
    // Need to check of string is not empty after the split
    if (string !== "" && (label.includes(string) || value.includes(string)))
      return true;
  } 
  return false;
};

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

Живой пример доступен здесь .

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...