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

Question

我在语义 ui 反应库 https://react.semantic-ui.com/modules/dropdown/#types-search-in-menu中的 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作为参考，但此链接无济于事

标签： javascriptreactjsformiksemantic-ui-react

Answer 1

您将 onChange 和 onBlur 事件置于 on<Dropdown.Item>而不是 on<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>