react-select 如何在点击 using typescript 时显示选项

Question

我对reactjs和typescript还是新手。 我有一个过滤器搜索栏，它根据用户输入的内容进行过滤。 如果单击，这也会显示一个下拉列表。

我遇到的问题是当我单击该选项时：该栏不显示我单击的选项。 即使我输入一些输入然后单击选项，也会显示一个空白栏。

单击选项时显示选项的最简单方法是什么？

另外，如何将我的数据移动到其他文件，如 JSON 文件并将其导入此处并在<Select/>中使用它来代替数据。

import * as React from 'react'
import Select from 'react-select/'


const data = [
    {label: 'React', value: 'react'},
    {label: 'ReactNative', value: 'react-native'},
    {label: 'Java', value: 'java'},
    {label: 'CSS', value: 'css'},
]

function filter(props) {
    return <div>
        <Select options={data} placeholder="Enter some text to filter the list below" />
    </div>
}

export default filter;

Answer 1

单击时显示选项的最简单方法是什么？

我查看了您的代码，它看起来像一个功能组件

他们不保存 State，这在本例中是可以的。 处理此过滤器组件的组件应具有 state 和所选选项，并相应地显示它。 我猜这里没有显示“父”组件，而是在您的代码中的某个位置。

另外，如何将我的数据移动到不同的文件，如 json 文件并将其导入此处并使用它代替数据。

创建一个 .js 文件，定义一个包含 Json 数据的 const 变量，然后导出它，有点像这样：

导出 const mockData = {... };