javascript - React-Native Javascript 搜索过滤功能
问题描述
我正在尝试在此数组中搜索这些成分并将值添加到data
以显示它,但它不起作用。我对javascript很陌生,所以如果有人能帮助我,我将不胜感激。这就是我所做的:
const Search = () => {
const ingridients = [ ["paprika", "parsley"], ["steak", "ground beef"],["milk", "eggs", "cheese"] ]
const [input, setInput] = useState();
const categorize = (term) => {
setInput(ter )
let data = []
if (term) {
const newData = ingridients.filter(() => {
if (RegExp(searchTerm, "gim").exec())
return RegExp(searchTerm, "gim").exec()
})
} else {
data = []
}
}
return(
<TextInput onChange={(text)=> categorize(text)} value={input}/>
)
}
解决方案
你的意思是这样的吗?
import React, { useState } from 'react';
import { Text, TextInput, View } from 'react-native';
export default function App() {
const ingridients = [
'paprika',
'parsley',
'steak',
'ground beef',
'milk',
'eggs',
'cheese',
];
const [input, setInput] = useState();
const [filteredData, setFilteredData] = useState([]);
const filter = (term) => {
setInput(term);
if(/\d/.test(term) || /[a-zA-Z]/.test(term)) {
setFilteredData(ingridients.filter(ingridient => ingridient.includes(term)));
}
else {
setFilteredData([]);
}
};
return (
<React.Fragment>
<TextInput
onChangeText={(text) => filter(text)}
value={input}
style={{ backgroundColor: 'grey' }}
/>
<View style={{ padding: 40 }}>
{filteredData.map(ingridient => (
<Text style={{ color: 'black' }}>{ingridient}</Text>
))}
</View>
</React.Fragment>
);
}
推荐阅读
- java - Lucene 查询解析器自动前缀
- javascript - 如何使用 Electron.js(使用 Typescript)配置 React?
- html - 元素 ul 不允许作为元素 ul 的子元素(验证错误)
- node.js - 无法读取图像上未定义的属性“替换”?
- javascript - 这个组件是否符合 React 的反模式?
- python - 如何强制 Spyder 等待交互式绘图,直到我手动关闭它?
- r - 哪个 R 对象可以存储多个网络?
- reactjs - React 在 JSX 中使用 CSS 模块
- api - 如果我使用 youtube v3 api 并观看视频,那么我会获得观看时间计数吗?
- python - 使用python将时间列导入sqlite