在列表视图中创建搜索栏

时间:2017-04-09 16:09:58

标签: react-native

我在列表视图中创建一个搜索栏,其中列出了多种食物类型,此搜索栏可以过滤结果。

当我搜索特定食物并选择此食物时,如果我擦除搜索栏,则会选择另一种食物。

你可以在这个gif中看到问题: https://giphy.com/gifs/3oKIPpagpRTfnuA9vW

我该如何解决这个问题?

代码:

class ListFood extends Component {

  constructor() {
      super();
      const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
      this.state = {
        ds: ds,
        dataSource: ds.cloneWithRows(dataDemo),
        rawData: dataDemo,
      };
    }

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

     let filteredData = this.filterNotes(searchText, data);
     ds = this.state.ds;

     this.setState({
       dataSource: ds.cloneWithRows(filteredData),
       rawData: data,
     });

    }

    filterNotes(searchText, notes) {
      let text = searchText.toLowerCase();

      return notes.filter((n) => {
        let note = n.toLowerCase();
        return note.search(text) !== -1;
      });
    }

    render() {
      return (
        <View>
          <TextInput
            value={this.state.searchText}
            onChange={this.setSearchText.bind(this)}
          />
          <ListView
            dataSource={this.state.dataSource}
            renderRow={(data) => <Row state={this.state.CheckBoxState} data={data} />}
          />
        </View>

      );
    }
}

行:

class Row extends Component {
  constructor(props) {
    super(props);
    this.state = { checked: false };
  }

  render() {
    return (
      <View´>
        <CheckBox
          onPress={() => this.setState({
            checked: !this.state.checked
          })}
          checked={this.state.checked}
        />
        <Text>
          { this.props.data }
        </Text>
      </View>
    );
  }
}

1 个答案:

答案 0 :(得分:2)

在未正确检测到行更改之前,我遇到了同样的问题。我每次有新数据时都会通过初始化数据源来解决这个问题。

所以尝试像

这样的东西
template <typename T>
auto operator<<(std::ostream& os, const std::vector<T>& vertices)
    -> decltype(glm::to_string(std::declval<T>()), std::declval<std::ostream&>())
{ 
    // ... as before
}