Невозможно выбрать элемент из Semanti c -ui-реагировать Поиск в выпадающем меню / Форма - PullRequest
Новая
       13

Невозможно выбрать элемент из Semanti c -ui-реагировать Поиск в выпадающем меню / Форма

1 голос
/ 23 апреля 2020

Я борюсь с выпадающим меню поиска в меню в semanti c Библиотека реагирования пользовательского интерфейса https://react.semantic-ui.com/modules/dropdown/#types -поиск в меню

Я делаю это 

              <Dropdown 
                  name='customRoomType'
                  id='customRoomType'
                  text={values.customRoomType} //tried onchange here but not works
                >
                    <Dropdown.Menu>
                      <Dropdown.Menu scrolling>
                        {tagOptions.map((option) => (
                          <Dropdown.Item key={option.value} 
                             className={option.value} 
                             onChange={(e, { value }) => {
                                {console.log('value ',value)}
                                setFieldValue('customRoomType', value)
                              }}
                              onBlur={handleBlur}
                              selectonblur={'false'}
                                        {...option} />
                              ))}
                      </Dropdown.Menu>
                    </Dropdown.Menu>
                  </Dropdown>

Выпадающий список не запускает какой-либо обработчик событий

Я взял это React semanti c -ui Dropdown onChange не работает в качестве ссылки, но эта ссылка не помогает

1 Ответ

0 голосов
/ 24 апреля 2020

Вы помещаете события onChange и onBlur в <Dropdown.Item> вместо <Dropdown>

Попробуйте, если это работает так: 

<Dropdown 
  name='customRoomType'
  id='customRoomType'
  // Check here that this is the same value that you set in onChange handler.
  text={values.customRoomType} 
  // onChange and onBlur are parts of Dropdown and not of Dropdown item
  onChange={(e, { value }) => {
                {console.log('value ',value)}
                setFieldValue('customRoomType', value)
              }}
  onBlur={handleBlur}
>
    <Dropdown.Menu>
      <Dropdown.Menu scrolling>
        {tagOptions.map((option) => (
          <Dropdown.Item key={option.value} 
             className={option.value} 
              // might also be moved.
              selectonblur={'false'}
                        {...option} />
              ))}
      </Dropdown.Menu>
    </Dropdown.Menu>
</Dropdown>
...