无法从Semantic-ui-react Search In-Menu Dropdown Formik中选择项目。

Question

我正在为在semantic ui react库中使用Search In-Menu下拉菜单而苦恼。https:/react.semantic-ui.commodulesdropdown#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无法正常工作。 参考，但这个链接没有用

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>