Kaedah untuk mengosongkan nilai ComboBox yang dipilih dalam HeadlessUI

Question

Saya cuba mengosongkan pilihan yang dipilih setiap kali pengguna membuka kotak lungsur.

Pada masa ini, apabila saya memilih pilihan dan membuka menu lungsur semula, pilihan yang dipilih sebelum ini kekal dipilih.

Saya telah menukar atribut nullable kepada benar tetapi itu tidak berjaya.

Berikut ialah kod: https://codesandbox.io/s/clever-chaum-94xsng?file=/src/FilterDropdown.js

Answer 1

Anda boleh cuba menggunakan atribut open dalam fungsi render. Ia memberitahu kami sama ada kotak lungsur dibuka. Saya membuat contoh yang sangat mudah.

<Combobox value={selected} onChange={setSelected} nullable>
  {/* 我使用渲染函数中的open值将值设置为null。当它打开时，值会被清空。 */}
  {({ open }) => {
    setIsOpen(open);
    if (open) {
      setSelected(null);
    }

Ini ialah kod lengkap. Mencubanya.