Нужно предложение по настраиваемому компоненту реагирования DualList - PullRequest
Новая
       12

Нужно предложение по настраиваемому компоненту реагирования DualList

0 голосов
/ 10 февраля 2019

Я работаю над веб-приложением, которое я начал с создания-реакции-приложения.Он реализует избыточность и имеет динамические данные, загружаемые с помощью вызовов axios.Мне нужны предложения для настраиваемого компонента dualList box, который поддерживает настраиваемые компоненты элемента и обработчики событий.

Я уже пробовал реагировать с двойным списком, но он не поддерживает выбранный элемент.компоненты.

1 Ответ

0 голосов
/ 10 февраля 2019

Он не позволяет настраивать выбранные компоненты для выбранных элементов, потому что это невозможно!Список выглядит следующим образом: html / реагирует jsx 

<select multiple>
  <option value="banana">Banana</option>
  <option value="apple">Apple</option>
  <option value="orange">Orange</option>
  <option value="pinapple">Pinapple</option>
</select>

Существуют различные варианты, но вы можете начать с создания собственной реализации списка с помощью кнопок div и кнопок и отслеживать, на какой элемент нажал пользователь, и применить различныестили, указывающие, что он активен. 

const { activeElement } = this.state;

<List>
  <ListItem isActive={activeElement === 'banana'} icon="banana">Banana</ListItem>
  <ListItem isActive={activeElement === 'apple'} icon="apple">Apple</ListItem>
  <ListItem isActive={activeElement === 'orange'} icon="orange">Orange</ListItem>
  <ListItem isActive={activeElement === 'pineapple'} icon={<SomeSvgIconThatLooksLikePineapple />}>Pineapple</ListItem>
</List>

Также clickHandlers не добавляются в этот пример.Требуется некоторое усилие, но это не трудно достичь.В вашем случае, я полагаю, вы получаете данные из redux в виде списка, поэтому вы можете отобразить свои результаты и применить другой компонент ListItem, соответствующий вашему типу.

...