无法 select 来自语义的项目-ui-反应搜索菜单下拉/ Formik

Question

我正在为语义 ui 反应库中的搜索菜单下拉菜单而苦苦挣扎 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 作为参考，但是这个 link 没有帮助

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>

无法 select 来自语义的项目-ui-反应搜索菜单下拉/ Formik

Not able to select Item from Semantic-ui-react Search In-Menu Dropdown / Formik

javascript

reactjs

semantic-ui-react

formik