Как сделать так, чтобы моя панель поиска реагировала на родную работу?

Question

Я учусь реагировать на свой язык сам. Я пытаюсь создать исследовательскую панель, но ничего не получается. Я знаю, как получить один элемент из моего списка данных, но я не понимаю, почему он не работает и как заставить его работать должным образом. Чтобы быть более точным c У меня есть список фермеров, и я хочу отфильтровать их по городу, в котором они работают.

Мой код:

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

Я прошел много уроков, но, похоже, ничего не работает. Я в полном отчаянии. Это, конечно, легко, но для такого разработчика, как я, это довольно сложно. Я надеюсь, что кто-то может помочь! Заранее спасибо и извините за мой плохой английский sh. :)

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

Answer 2

Это рабочее решение:

snack-expo Проверьте один раз с ab c в качестве ввода, для большего количества сомнений я могу уточнить:

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

export default class App extends React.Component {

    constructor(props) {
        super(props)
        this.state = {
          farmers: [],
          searchedText: "" ,
          data:[{
            name:'a',
            city:'ABC'
          },{
            name:'b',
            city:'WOW'
          }
          ],
          dataShown:[{
            name:'a',
            city:'ABC'
          },{
            name:'b',
            city:'WOW'
          }]
        }
    }

    _searchTextInputChanged = (text) => {

        let newDataF = [];
        this.state.data.map((e) => {
          if(e.city.toLowerCase() == text.toLowerCase())
          {
            newDataF.push(e)
          }
        })


        this.setState({ searchedText: text, dataShown:newDataF })
    }


    render() {

        return (
            <View style={{marginTop:100}} >
                <TextInput onChangeText={this._searchTextInputChanged} placeholder='Nom du maraicher'/>
                <Button title='Rechercher' onPress={() => {this._loadFarmer()}}/>
                {this.state.dataShown.map(element => <Text>{element.city}</Text> )} 

            </View>
        );
    }
}