onClick 或 onChange 在预行 UI 选择组件中不起作用

Question

我正在 React 中使用 preline UI 库来设计我的网站。但不知何故，如果我使用带有 data-hs-select 属性的“select”按照 preline UI，onChange 或 onClick 实际上不起作用。甚至没有通过 onClick/onChange 在控制台中获取任何内容。但在浏览器界面中，它显示正确的选择值，如果我尝试 useRef 或文档选择器值，我可以从输入中获取正确的选择值。

我尝试过使用 formik 字段 [as='select'] 但同样的问题

 <select
      name='Country'
      data-hs-select='{
        "hasSearch": true,
        "searchPlaceholder": "Search...",
        "searchClasses": "block w-full text-sm border-gray-200 rounded-lg focus:border-blue-500 focus:ring-blue-500 before:absolute before:inset-0 before:z-[1] dark:bg-slate-900 dark:border-gray-700 dark:text-gray-400 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600 py-2 px-3",
        "searchWrapperClasses": "bg-white p-2 -mx-1 sticky top-0 dark:bg-slate-900",
        "placeholder": "Select ...",
        "toggleTag": "<button type=\"button\"><span class=\"me-2\" data-icon></span><span class=\"text-gray-800 dark:text-gray-200\" data-title></span></button>",
        "toggleClasses": "hs-select-disabled:pointer-events-none hs-select-disabled:opacity-50 relative py-3 px-4 pe-9 flex text-nowrap w-full cursor-pointer bg-white border border-gray-200 rounded-lg text-start text-sm focus:border-blue-500 focus:ring-blue-500 before:absolute before:inset-0 before:z-[1] dark:bg-slate-900 dark:border-gray-700 dark:text-gray-400 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600",
        "dropdownClasses": "mt-2 max-h-[300px] pb-1 px-1 space-y-0.5 z-20 w-full bg-white border border-gray-200 rounded-lg overflow-hidden overflow-y-auto dark:bg-slate-900 dark:border-gray-700",
        "optionClasses": "py-2 px-4 w-full text-sm text-gray-800 cursor-pointer hover:bg-gray-100 rounded-lg focus:outline-none focus:bg-gray-100 dark:bg-slate-900 dark:hover:bg-slate-800 dark:text-gray-200 dark:focus:bg-slate-800",
        "optionTemplate": "<div><div class=\"flex items-center\"><div class=\"me-2\" data-icon></div><div class=\"text-gray-800 dark:text-gray-200\" data-title></div></div></div>"
      }'
      className='hidden'
      onChange={() => console.log('option clicked')}
    >
      <option value=''>Choose</option>
      <option value='Australia'>Australia</option>
      <option value='Canada'>Canada</option>
      <option value='France'>France</option>
      <option value='Germany'>Germany</option>
      <option value='Italy'>Italy</option>
    </select>

Answer 1

预行文档中提到了 onChange 事件。

预线文档