reactjs - 如何使用搜索文本输入(expo、react-native)在屏幕上显示项目
问题描述
我正在使用本机反应和博览会。我在屏幕(iOS)模拟器上有一些从 API 获取的 JSON 数据。在顶部,我有一个搜索栏,用户可以在其中搜索屏幕上显示的数据。
例如,如果数据是
一个
一家公司
乙
公司
A 是公司符号,a company
是符号名称。所以当用户输入A时它应该显示A
公司,如果用户输入Z
它应该显示Z
公司。
我的代码:
import React, { useState, useEffect } from "react";
import {
StyleSheet,
View,
TouchableWithoutFeedback,
Keyboard,
FlatList,
TextInput,
Button,
Text,
} from "react-native";
import { useStocksContext } from "../contexts/StocksContext";
import { scaleSize } from "../constants/Layout";
import { Ionicons } from "@expo/vector-icons";
import { ListItem } from "react-native";
export default function SearchScreen({ navigation }) {
const { ServerURL, addToWatchlist } = useStocksContext();
const [state, setState] = useState({
/* initial state here */
myListData: [],
search: "",
});
useEffect(() => {
renderWithData();
// FixMe: fetch symbol names from the servner and save in local SearchScreen state
}, []);
updateSearch = (event) => {
setState({ search: event.target.value });
};
renderWithData = () => {
return fetch("http://131.181.190.87:3001/all")
.then((res) => res.json())
.then((json) => {
setState({
isLoaded: true,
myListData: json,
});
setTimeout(() => {
console.log(state.myListData);
}, 10000);
});
};
let filteredItems = state.myListData.filter((item) => {
return (
item.symbol.toUpperCase().indexOf(state.search.toUpperCase()) !== -1 ||
item.name.indexOf(state.search) !== -1
);
});
let movies = state.myListData.filteredItems.map((val) => {
return (
<View key={val.symbol} style={styles.text}>
<Text style={styles.text}>{val.symbol}</Text>
<Text style={styles.text}>{val.name}</Text>
</View>
);
});
return (
<TouchableWithoutFeedback onPress={Keyboard.dismiss}>
<View style={styles.container}>
<TextInput
style={styles.textinput}
placeholder="Search here"
placeholderTextColor="white"
value={state.search}
onChange={updateSearch.bind()}
/>
<Text>csdn</Text>
<View style={styles.text}>{movies}</View>
</View>
</TouchableWithoutFeedback>
);
}
const styles = StyleSheet.create({
textinput: {
color: "white",
height: "20",
fontSize: 18,
},
text: {
color: "white",
backgroundColor: "black",
},
flatstuff: {
color: "white",
},
// use scaleSize(x) to adjust sizes for small/large screens
});
我不确定我做错了什么,但是如果我在 textinput 上输入一些内容,它不会显示任何内容(更像是搜索内容不起作用)并且我的数据仍然显示在屏幕上,除非我无法搜索它使用文本输入。有人可以帮我吗?
编辑:json数据
目的 {
"name": "Chesapeake Energy",
"symbol": "CHK",
}, 目的 {
"name": "C. H. Robinson Worldwide",
"symbol": "CHRW",
},
解决方案
您应该在 React-Native 中使用如下文本输入
<TextInput
style={styles.textinput}
placeholder="Search here"
placeholderTextColor="white"
value={state.search}
onChangeText={text=>updateSearch(text)}
/>
你应该使用 onChangeText 并且 updateSearch 应该像下面这样改变
updateSearch = (text) => {
setState({ search: text });
};
更新
这就是您的完整组件的外观,您可以尝试一下
function SearchScreen({ navigation }) {
const { ServerURL, addToWatchlist } = useStocksContext();
const [state, setState] = useState({
/* initial state here */
myListData: [],
});
const [search, setSearch] = useState('');
useEffect(() => {
renderWithData();
// FixMe: fetch symbol names from the servner and save in local SearchScreen state
}, []);
const updateSearch = (text) => {
setSearch(text);
};
renderWithData = () => {
return fetch('http://131.181.190.87:3001/all')
.then((res) => res.json())
.then((json) => {
setState({
isLoaded: true,
myListData: json,
});
setTimeout(() => {
console.log(state.myListData);
}, 10000);
});
};
let filteredItems = state.myListData.filter((item) => {
return (
item.symbol.toUpperCase().indexOf(search.toUpperCase()) !== -1 ||
item.name.indexOf(search) !== -1
);
});
let movies = filteredItems.map((val) => {
return (
<View key={val.symbol} style={styles.text}>
<Text style={styles.text}>{val.symbol}</Text>
<Text style={styles.text}>{val.name}</Text>
</View>
);
});
return (
<TouchableWithoutFeedback onPress={Keyboard.dismiss}>
<View style={styles.container}>
<TextInput
style={styles.textinput}
placeholder="Search here"
placeholderTextColor="white"
value={search}
onChangeText={(text) => updateSearch(text)}
/>
<Text>csdn</Text>
<View style={styles.text}>{movies}</View>
</View>
</TouchableWithoutFeedback>
);
}
推荐阅读
- angular - 为 Angular 应用程序设计
- python - 使用 SimpleITK 执行 3D 共定位和距离测量
- javascript - 你如何实现一个计时器来计算用户在页面上提交表单所花费的时间
- asp.net-core - EF Core 3.0 使用 DbSet.Add 方法时反转 SQL 插入语句
- node.js - 方法 .save() 在 adonis/node.js 中插入而不是更新我的模型
- javascript - 当翻译在另一个集合中时,如何在 MongoDB 上处理 i18n(带回退)?
- twig - Twig:如何防止在 GET 参数中编码方括号
- python - python中的正则表达式,需要从字符串中打印网站名称
- vba - 如何在 Word 中的 VBA 中的一个函数中搜索多个单词?
- python - 在 if/then 语句中使用错误作为条件