使用 SyntheticEvent 反应 Hooks，无法从下拉列表中获取值

Question

我是一名正在尝试学习 react typescript 的学生，我遇到了一些问题

所以我需要从下拉列表中获取价值

代码：

var countryOptions = [
     { key: "al", value: "Albania", text: "Albania" },
     { key: "kos", value: "Kosovo", text: "Kosovo" },
];


<Dropdown   
    clearable
    fluid
    multiple
    search
    selection
    options={qytetetOptions}
    value={adresa.qyteti}
/>

我们学到的方法是这样使用 react hooks：

const initializeForm = () => {
    return {
      id: "",
      emri: "",
      mbiemri: "",
      nrTelefonit: "",
      nrTelefonit2: "",
      adrersa: "",
      adresa2: "",
      qyteti: "",
      shteti: "",
    };
  };
const [adresa, setAdresaF] = useState<IAdresaF>(initializeForm);




const handleInputChange = (event: ChangeEvent<HTMLInputElement>) => {
    const { name, value } = event.target;
    setAdresaF({ ...adresa, [name]: value });
};

但这是用于表单输入的，在下拉列表中它说我需要使用 SythneticEvent

有人可以帮助如何从下拉列表中获取价值

Answer 1

语义 UI React 的 Dropdown 组件接受 onChange 属性，您可以将处理程序分配给。因此，您从 Dropdown 组件更新状态的代码可能如下所示：

const [adresa, setAdresaF] = useState<IAdresaF>(initializeForm)

const handleQutetyChange = (
    ev: React.SyntheticEvent,
    { value }: any
) => {
    setAdresaF({ ...adresa, qutety: value })
}

...

return (
    ...
    <Dropdown
        onChange={handleQutetyChange}
        ...
        value={adresa.qutety}
    />
    ...
)

很遗憾，您必须将第二个参数输入为any。 onChange 的 Type definition 功能过于模糊。

export interface DropdownProps extends StrictDropdownProps {
  [key: string]: any
}

...
onChange?: (event: React.SyntheticEvent<HTMLElement>, data: DropdownProps) => void

虽然你做了更长的路线。将其键入为unknown，然后适当地缩小类型。以custom type predicates 为例。尽管只要您的选项都是事先知道的并且不能在运行时更改，我相信这是不必要的步骤。