Question

我是React Native的新手，在我尝试构建iPhone应用程序时遇到了这个问题。

我的代码就像：

var React = require('react-native');
var MyListView = require('./MyListView');  // which renders a <ListView>...</ListView>

var SearchPage = React.createClass({
  onSubmitEditing: function () { /* do something */ },
  render: function() {
    return (
      <ScrollView>
        <TextInput onSubmitEditing={this.onSubmitEditing} />
        <MyListView />
      </ScrollView>
    )
  },
})

在搜索（MyListView事件）时，我需要更改onSubmitEditing（更新数据源）的状态。我该怎么办？如果我可以使用<MyListView />作为JavaScript对象，我认为可能有一些解决方案，我不知道如何。

任何帮助都将受到赞赏！提前致谢！

Answer 1

您有两个选择：

假设在SearchPage组件中你知道数据是什么，你可以将它作为道具传递给MyListView：`
但是，我认为更好的选择是将数据存储在商店（流量）中，然后过滤商店中的列表。我做了这样的事情：

reg = new RegExp(sanitizer.escapeRegExp(query), "i") filteredList = _.filter @initialDataSource(), (item) => item.name.match(reg) this.setState({dataSource: this.state.dataSource.cloneWithRows(filteredList)})

我正在使用lodash过滤列表，然后加载dataSource。您可以只将查询传递给MyListView，这是一个更清洁的＆＃39; <MyListView query={queryValue} />

Answer 2

我认为最好的解决方案是将道具传递给MyListView组件。你应该在SearchPage组件中维护状态，并在onSubmitEditing函数中设置它的状态：

var SearchPage = React.createClass({
getInitialState: function(){
return {toUpdate: false}
}
  onSubmitEditing: function () { this.setState({toUpdate: true})},
  render: function() {
    return (
      <ScrollView>
        <TextInput onSubmitEditing={this.onSubmitEditing} />
        <MyListView toUpdate={this.state.toUpdate}/>
      </ScrollView>
    )
  },
})

每次调用setState时，都会重新呈现它的子组件及其子组件。在MylistView组件中，您只需检查this.props.toUpdate并根据此prop值执行操作。

React Native - 如何将组件用作JavaScript对象？

2 个答案: