时间戳

首页 > 解决方案 > react-select如何在点击使用打字稿时显示选项

javascript - react-select如何在点击使用打字稿时显示选项

问题描述

我对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;

标签： javascriptreactjstypescript

解决方案

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

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

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

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

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

导出 const mockData = { ... };

推荐阅读