Question

我目前正在学习本地反应并陷入ListView问题。我想从TextInput中搜索ListView中的数据，我希望结果也在ListView中。

这是我到目前为止所做的事情：

＆＃13;

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

＆＃13;

接下来应该做什么？请帮忙。谢谢:)）

更新！在阅读了urbancvek的答案之后，我在setSearchText()方法中添加了这样的函数：

＆＃13;

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

＆＃13;

但是它总是向我展示所有的电影，而不是过滤掉的电影。有任何想法吗？感谢

Answer 1

在你的fetchData方法中，你应该将responseData保存到状态。然后，每次搜索字段更改时，您都会与此数据进行交互。

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()中说明。

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组件才能意识到它显示的数据已经改变。

希望我帮助过。

Answer 2

在listview中搜索数据基本上只是在链表或数组中搜索它，只需获取输入并在数据源或数据blob中搜索它。您可以使用线性搜索或二进制搜索，无论您喜欢哪种方式。

Answer 3

来自Facebook的UIExplorer示例显示了如何使用ListView执行此操作： https://github.com/facebook/react-native/tree/master/Examples/UIExplorer

ListView中的搜索数据反应原生

3 个答案: