ListView中的搜索数据响应本机 [英] Search data in ListView react native

问题描述

我目前正在学习本机操作，并陷入ListView问题.我想从TextInput搜索ListView中的数据，并且我希望结果也位于ListView中.

I'm currently learning react-native and getting stuck in ListView problems. I want to search data in ListView from a TextInput and i expect that the result is in ListView too.

这是我到目前为止所做的:

Here's what i've done so far:

var PageOne = React.createClass({
  getInitialState:function(){
    return{
      dataSource: new ListView.DataSource({
        rowHasChanged: (row1, row2) => row1 !== row2,
      }),
      loaded: false,
      colorProps: {
        titleColor: 'white',
      },
      searchText:"",
    }
  },

  componentDidMount() {
    this.fetchData();
  },

  fetchData() {
    fetch(REQUEST_URL)
      .then((response) => response.json())
      .then((responseData) => {
        this.setState({
          dataSource: this.state.dataSource.cloneWithRows(responseData.movies),
          loaded: true,
        });
      })
      .done();
  },

  setSearchText(action){
    let searchText = event.nativeEvent.text;
    this.setState({searchText});

    /*
     *
     * 
     */

  },

  render() {
    return (
      <View style={{ flex: 1 }}>
        <ToolbarAndroid
          title="Movies"
          {...this.state.colorProps}
          style={{height:40, backgroundColor:'blue'}}
           />
        <TextInput
          placeholder="Search movies......."
          value={this.state.searchText}
          onChange={this.setSearchText.bind(this)} />
        <ListView
        dataSource={this.state.dataSource}
        renderRow={this.renderMovie}
        style={styles.listView}
        />
      </View>
    );
  },

  renderMovie(movie) {
    return (
    <TouchableOpacity onPress={this._handlePressList.bind(this, movie)}>
      <View style={styles.container}>
        <Image
          source={{uri: movie.posters.thumbnail}}
          style={styles.thumbnail}
        />
        <View style={styles.rightContainer}>
          <Text style={styles.title}>{movie.title}</Text>
          <Text style={styles.year}>{movie.year}</Text>
        </View>
      </View>
    </TouchableOpacity>
    );
  },

接下来我该怎么办?请帮忙.谢谢:)

what am i supposed to do next? Please help. Thanks :)

更新！从urbancvek阅读答案后，我在setSearchText()方法中添加函数，如下所示:

Update! After read the answer from urbancvek, i add function in setSearchText() method like this:

setSearchText(event){
    const searchText = event.nativeEvent.text;
    
    moviesLength = this.state.movies.length;
    aMovie = this.state.movies;

    const filteredMovies = this.state.movies.filter(checkTitle);
    console.log("movies: " + JSON.stringify(filteredMovies));

    function checkTitle() {
        for(i=0;i<moviesLength;i++){
          if(aMovie[i].title === searchText){
            console.log("found:  " + aMovie[i].title);
            return aMovie[i];
          }
        }
    }
    
    this.setState({
        searchText,
        dataSource: this.state.dataSource.cloneWithRows(filteredMovies),
    });
  },

但它总是向我显示所有电影，而不是已过滤的电影.有任何想法吗?谢谢

But it always show me all the movies, not filtered one. any ideas? thanks

推荐答案

在您的fetchData方法中，您可能还应该将responseData保存为状态.每次搜索字段更改时，您都将与此数据进行交互.

In your fetchData method you should probably save responseData to state too. You will then interact with this data each time search field changes.

fetchData() {
    fetch(REQUEST_URL)
      .then((response) => response.json())
      .then((responseData) => {
        this.setState({
          dataSource: this.state.dataSource.cloneWithRows(responseData.movies),
          movies: responseData.movies,
          loaded: true,
        });
      }).done();
 },

现在，在setSearchText()方法中，您应该包括一些过滤器功能，该功能将从保存在fetchData()中的电影中找到想要的电影.

Now in your setSearchText() method you should include some filter function that will find the movies you want from the movies you saved to state in fetchData().

setSearchText(action){
    const searchText = event.nativeEvent.text;
    const filteredMovies = this.state.movies.filter(/* awesome filter function */);

    this.setState({
        searchText,
        dataSource: this.state.dataSource.cloneWithRows(filteredMovies);
    });
},

每次要更新ListView时，都必须更新它的dataSource.只有这样，ListView组件才能意识到其显示的数据已更改.

Each time you want to update ListView you have to update it's dataSource. Only this way ListView component can realize that the data it's displaying has changed.

希望我能帮上忙.

这篇关于ListView中的搜索数据响应本机的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！