使用Typescript如何使用Ref来访问react-select方法？

Question

我正在学习 React 和 Typescript，并尝试创建一个由 3 个反应选择下拉列表组成的“搜索过滤器”。

我使用车辆品牌填充第一个下拉菜单，然后使用所选车辆品牌的范围填充第二个下拉菜单，使用从车辆范围选择对象中选择的 ID 填充第三个下拉菜单。

一切正常，但我需要在更改时清除所选对象的选定值，或者以前的值仍然显示不适用于新选择。

我尝试实现 useRef，我在网上读到过它，它正在工作，因此在需要时值很清晰，但方法调用在 IDE 中报告错误，我需要了解如何在设置我的应用程序时引用正确的“类型” useRef 因此这些方法在代码中是已知的。

下面是我的带有react-select元素的反应组件之一，以及调用方法“hasValue”和“clearValue”的代码，这些方法显示错误““RefObject”类型上不存在属性“clearValue”。”：

"use client"
import { useEffect, useState, useRef } from "react"
import { SearchFilterAPI } from "../../api/searchFilter"
import Select from 'react-select'
import { CustomFilterProps } from '@/types';

const VehicleModels = ({ id, handleSelect }: CustomFilterProps) => {
    const [options, setOptions] = useState([]);

    let selectRef = useRef<Select>(null);
    const clearValue = () => {
        ***if (selectRef.hasValue()) {
            selectRef.clearValue();***
        }
    };
    useEffect(() => {
        async function fetchData() {
            // Fetch data
            if (typeof id !== "undefined" && id > 0) {
                clearValue();
                setOptions([]);
                let data = await SearchFilterAPI.getModelsForRangeId(id);
                let results = [];
                // Store results in the results array
                data.forEach((item) => {
                    results.push({
                        value: item.id,
                        label: item.name
                    });
                });
                // Update the options state
                setOptions([...results])
            }
        }
        fetchData();
    }, [id]);

    return (
        <div>
            Vehicle Model
            <Select 
                ref={ref => {
                    selectRef = ref;
                }} 
                placeholder="Select vehicle model..." 
                options={options} 
                onChange={handleSelect}></Select>
        </div>
    );
}
export default VehicleModels;

确实需要帮助理解为什么这些方法在编译时不可用。

提前感谢您提供有关如何工作的任何建议或示例代码。

Answer 1

与反应选择类似的情况，我们需要在选择后将选择选项重置为零。 （实际上我们正在使用 chakra-react-select，但因为它只是反应选择的包装器，所以以下两者都适用）

首先实例化选择引用。

const selectRef = useRef<SelectInstance<ISelectOption | null>>(null)

SelectInstance 是从react-select 导入的。 ISelectOption 是选项的类型，例如{label:'',value:0}。然后添加 select ref 以指向选择元素。

<Select ref={selectRef} ... />

然后我们可以在 select 事件处理程序中使用 ref 例如：

onChange={(e) => {
    selectRef.current?.focus()
}}

有关引用类型的更多讨论可以在这里找到：https://github.com/JedWatson/react-select/discussions/4669#discussioncomment-1994888.

希望这能让您更深入地了解如何利用参考。