javascript - 使用 react 和 typescript 制作搜索过滤器
问题描述
- 嗨,我真的很想获得有关如何制作搜索过滤器的帮助。我希望能够在输入字段中输入一些文本,以便 ul 列表过滤器使用相同的字母。
interface ICrypto {
id: string;
name: string;
}
const defaultProps:ICrypto[] = [];
const Dashboard: React.FC = () => {
const [crypto, setCryptos]: [ICrypto[], (posts: ICrypto[]) => void] = React.useState(defaultProps);
const [search, setSearch]: [string, (search: string) => void] = React.useState("");
const handleChange = (e: { target: { value: string; }; }) => {
setSearch(e.target.value);
};
const filteredCoins = crypto.filter(crypto =>
crypto.name.toLowerCase().includes(search.toLowerCase())
);
return (
<div className="App">
<ul className="posts">
<input type="text"></input>
{crypto.map((crypto) => (
<li key={crypto.id}>
<h3>{crypto.id}</h3>
<p>{crypto.current_price}</p>
<p>{crypto.symbol}</p>
<img src={crypto.image} alt="image" />
</li>
))}
</ul>
{error && <p className="error">{error}</p>}
</div>
)
}
解决方案
const Dashboard: React.FC = () => {
const [crypto, setCryptos]: [ICrypto[], (posts: ICrypto[]) => void] = React.useState(defaultProps);
const [search, setSearch]: [string, (search: string) => void] = React.useState("");
const handleChange = (e: { target: { value: string; }; }) => {
setSearch(e.target.value);
};
return (
<div className="App">
<ul className="posts">
<input type="text" onChange={handleChange} />
{crypto.map((crypto) => {
if (search == "" || crypto.name.toLowerCase().includes(search.toLowerCase())) {
return (
<li key={crypto.id}>
<h3>{crypto.id}</h3>
<p>{crypto.current_price}</p>
<p>{crypto.symbol}</p>
<img src={crypto.image} alt="image" />
</li>
);
}
return null;
)}
</ul>
{error && <p className="error">{error}</p>}
</div>
)
}
推荐阅读
- vuetify.js - v-autocomplete @change 上一个元素
- javascript - React-native 组件不起作用,它循环并在 UI 上显示出越来越大的价值
- python - 仅当我尝试提交电子邮件表单但在本地工作正常时,我在 heroku 上收到“没有名为 django 的模块”错误
- vue.js - 如何使用 vuetify 制作自适应网站?
- android - 程序类型已经存在:android.support.customtabs.ICustomTabsCallback$Stub$Proxy
- javascript - 我应该如何正确调用 NuxtServerInit?
- android - 来自 koin 的 SharedViewModel 不能与 MapFragment 一起使用
- node.js - 本地主机到带有转发节点 js 的 Live Server
- python - 如何让 Pygame 打开图像
- python-3.x - 解决循环python中的陈旧元素