javascript - 如何使我的搜索栏在 React Native 中正常工作？

Question

我正在自学 React Native。我尝试创建一个研究栏，但似乎没有任何效果。我知道如何从我的数据列表中获取一个元素，但我不明白为什么它不起作用以及如何使其正常工作。更具体地说，我有一份农民名单，我想根据他们工作的城市过滤他们。

我的代码是:

import React from 'react'
import { FlatList, View, TextInput, Button, StyleSheet } from 'react-native'
import { ListItem, SearchBar } from 'react-native-elements';
import data from '../Helpers/FarmersData.js'
import FarmerItem from './FarmerItem'
import { registerRootComponent } from 'expo';

// return data.filter(function (e){return e.City == text}).map(element => <FarmerItem farmer={element} key={element.id} /> );

class Search extends React.Component {

    constructor(props) {
        super(props)
        this.state = {
          farmers: [],
          searchedText: "" 
        }
    }

    _searchTextInputChanged(text) {
        this.setState({ searchedText: text })
    }

    _loadFarmer() {


        if (this.state.searchedText.length > 0) { // Seulement si le texte recherché n'est pas vide
            data.filter(e => e.City == this.state.searchedText).map(element => <FarmerItem farmer={element} key={element.id} /> ).then(data => {
              this.setState({ element: data.results })
          })          
        }
    }

    render() {
        return (
            <View style={styles.main}>
                <TextInput style={styles.textinput} placeholder='Nom du maraicher'/>
                <Button title='Rechercher' onPress={() => {this._loadFarmer()}}/>
                {data.map(element => <FarmerItem farmer={element} key={element.id} /> )} 

            </View>
        );
    }
}

我遵循了很多教程，但似乎没有任何效果。我彻底绝望了。这当然很容易，但对于像我这样的非开发人员来说，这有点困难。我希望有人能帮帮忙!提前谢谢你，对不起我的英语不好。 :)

Answer 1

第 1 步:在构造函数中，我们将所有农民设置为农民

第 2 步:TextInput 具有 onChangeText，因此我们可以像您在

中显示的那样直接使用我们的文本

第 3 步:在 _searchTextInputChanged 中，我们可以访问我们的文本，以便我们使用我们的农民数据过滤我们的文本。

您可以看到我们是否有拥有城市的农民，然后我们将其分配给我们的州，否则我们将所有数据设置为州，如您在 _searchTextInputChanged 中看到的

import React from 'react'
import { FlatList, View, TextInput, Button, StyleSheet , Text } from 'react-native'
import { ListItem, SearchBar } from 'react-native-elements';
import data from '../Helpers/FarmersData.js'
import FarmerItem from './FarmerItem'
import { registerRootComponent } from 'expo';

// return data.filter(function (e){return e.City == text}).map(element => <FarmerItem farmer={element} key={element.id} /> );

class Search extends React.Component {

    constructor(props) {
        super(props)
        this.state = {
          farmers: data ,
          searchedText: "" // Initialisation de notre donnée searchedText dans le state
        }
    }

    _searchTextInputChanged = async (text) => {
        const newData = await data.filter(e => e.City.toLowerCase() === text.toLowerCase() );

        //change your logic as per your requirement 
        if( newData.length > 0 ){
        this.setState({farmers : newData})
        }else{
        this.setState({farmers : data })
        }
    }

    render() {
        return (
          <>
            <View style={styles.main}>
                <TextInput style={styles.textinput} onChangeText = {(text) => this._searchTextInputChanged(text)} placeholder='Nom du maraicher'/>
                {this.state.farmers.map(element => <FarmerItem farmer={element} key={element.id} /> )}

            </View>
            </>
        );
    }
}

// Components/Search.js
const styles = StyleSheet.create({
    main: {
        flex:1,
        marginTop:30,
        backgroundColor:'white'
    },
    textinput: {
        marginLeft: 5,
        marginRight: 5,
        height: 50,
        borderColor: '#86d972',
        borderWidth: 1,
        paddingLeft: 5
    }
  })

export default Search