如何使用搜索文本输入(Expo，React-Native)在屏幕上显示项目 [英] How to display items on screen using search textinput (expo, react-native)

问题描述

我正在使用react native和expo.我在屏幕(iOS)模拟器上有一些从API获取的JSON数据.在顶部，我有一个搜索栏，用户可以在其中搜索屏幕上显示的数据.

I am using react native and expo. I have some JSON data on the screen (iOS) simulator that was fetched from API. At the top, I have a search bar where users can search the data that is displayed on the screen.

例如，如果数据为

A

公司

B

公司

A是公司符号，而a company是符号名称.因此，当用户键入A时，应显示A公司，如果用户键入Z，则应显示Z公司.

A is a company symbol and a company is a symbol name. So when user types A it should display A company and if user type Z it should display Z company.

我的代码:

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上键入内容，它不会显示任何内容(更像是搜索内容无法正常工作)，并且我的数据仍会显示在屏幕上，除非我可以. t使用textinput搜索它.有人可以帮我吗?

I am not sure what am I doing wrong, but if I type something on textinput, it doesn't display anything (more like the search thing is not working) and my data is still displayed on the screen except I can't search it using the textinput. Could someone please help me?

json数据

对象{

"name": "Chesapeake Energy",
"symbol": "CHK",

}， 对象{

"name": "C. H. Robinson Worldwide",
"symbol": "CHRW",

}，

推荐答案

您应在React-Native中使用以下文本输入

You should use the textinput like below in React-Native

 <TextInput
      style={styles.textinput}
      placeholder="Search here"
      placeholderTextColor="white"
      value={state.search}
      onChangeText={text=>updateSearch(text)}
    />

您应该使用onChangeText 并且updateSearch应该像下面这样更改

You should use the onChangeText and the updateSearch should change like below

updateSearch = (text) => {
    setState({ search: text });
  };

更新

这是完整组件的外观，可以尝试一下

This is how your full component should look like, you can try it out

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>
  );
}

这篇关于如何使用搜索文本输入(Expo，React-Native)在屏幕上显示项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！