如何搜索项目?

时间:2018-07-29 10:58:07

标签: javascript reactjs react-native

Home.js

我不是在使用本机搜索图标,而是从本机元素开始响应的。我不知道如何搜索从后端获取的项目...

 this.state = {
        data: [],
        isLoading: true
    }

 componentDidMount(){
     API.get_products()
        .then((products) => {
            this.setState({
                data: products.data,
                isLoading: false
            });
        })
         .catch(err => alert(err.message));
     }

Search.js

 render() {
        if (this.state.showSearchBar) {
            return <TextInput
                style={{width: width, backgroundColor: 'white', fontSize: 18, paddingLeft: 10}}
                placeholder={'Search'}
            />
        }
  return(
          <View>
             <TouchableOpacity
                   onPress={() => {
                       this.setState({showSearchBar: true})
                    }}
               >
                  <Image
                       source={require('../images/tabs/search.png')}
                        style={{height: 40, width: 60}}
                        resizeMode={'contain'}
                    />
                </TouchableOpacity>
          </View>
        )

App.js 这是主页。它具有导航功能

const Inside = TabNavigator(
{
    Home: {
        screen: Home,
        navigationOptions: {
            headerLeft: null,
            headerTitle: "Blue Rocker",
            headerRight: <Search/>,
}})

1 个答案:

答案 0 :(得分:0)

您的问题尚不清楚,并且会丢失信息...如果您想读取所有数据信息,请至少给我们提供数据的结构。

由于它肯定是json,因此可以这样使用方法filter()

var filteredItems = data.filter(function(yourElement) {
 return yourElement.aCertainValue == yourInputTextString;
})