Отключить один или несколько выбранных элементов в React Bootstrap Async Typeahead

Question

Я использую response-bootstrap-typeahead для добавления элементов в список. Я хочу отключить кнопку удаления добавленных элементов в соответствии с условием.

https://ericgio.github.io/react-bootstrap-typeahead/

Answer 1

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

Сами токены принимают опору disabled. Если true, токен будет доступен только для чтения , а будет иметь отключенный вид.

В качестве альтернативы, если пропустить опцию onRemove на токене, он будет доступен только для чтения без отключенногоВнешний вид.

Вот базовый пример того, как указать каждый из методов, описанных выше:

<Typeahead
  ...
  multiple
  renderToken={(option, props, idx) => (
    <Token
      disabled={idx === 0}
      onRemove={idx === 1 ? undefined : props.onRemove}>
      {option.label}
    </Token>
  )}
/>

Рабочая песочница: https://codesandbox.io/s/react-bootstrap-typeahead-token-customization-495-54gtg

Примечание: Как в отключенном, так и в режиме только для чтения пользователи не смогут удалить выбранные элементы после добавления, поэтому будьте осторожны с пользовательским интерфейсом. Состояние disabled, как правило, лучше всего использовать, когда отключена вся типография. В этом случае состояние disabled автоматически передается компонентам токена. Выбор только для чтения удобен, если вы хотите предварительно выбрать требуемые параметры, например.

Answer 2

Вы можете использовать это, чтобы отключить его:

<Joyride
   styles={
             {
                buttonClose: {
                   display: 'none',
                },
             }
   }