无法从语义用户界面反应搜索菜单内下拉菜单/格式中选择项目

Question

我正在语义ui react库中的Search In-Menu下拉菜单中苦苦挣扎https://react.semantic-ui.com/modules/dropdown/#types-search-in-menu

我正在这样做

              <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 semantic-ui Dropdown onChange not working为参考，但此链接无济于事

Answer 1

您将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>