クエリを実行して結果をリストビューに表示するSearchPageコンポーネントがあります。次に、ユーザーはそれらをタップして、必要な結果を選択します。これにより、それらがSearchResultsコンポーネントの配列に保存されます。
以下のコードに見られるように、結果が返されるときに 'displayWords'メソッドが呼び出されます。スタック上の新しいビューSearchResultsをプッシュし、右ボタンを「保存」に設定し、データを保存するために呼び出される関数をアタッチします。
class SearchPage extends Component {
displayWords（words）{
this.props.navigator.push（{
title： 'Results'、
component：SearchResults、
rightButtonTitle： 'Save'、
onRightButtonPress：（）=> {this.props.navigator.pop（ ）;
this.props.save（）}、
passProps：{リスト：単語}
}）;
this.setState（{isLoading：false、message： ''}）;
}
だからここに質問があります、SearchResultsコンポーネントの配列からコールバックにアイテムを取得するにはどうすればよいですか？またはSearchPageに？それとも私が従うべき別のパターンがありますか？
興味深い質問です！
哲学的に言えば、ナビゲーターとナビゲーションスタックの概念全体がReact-yデータフローを壊します。SearchResultsコンポーネントをのサブコンポーネントとして単純にレンダリングできる場合はSearchPage、選択した検索結果をSearchPage状態の一部にして、それらをSearchPage小道具として渡すだけなので。SearchPageまたSearchResults、検索結果が切り替えられたときに通知するコールバックを取得します。
残念ながら、ナビゲーターがそのままの状態で、状態を複製する必要があります。
displayWords(words) {
this.props.navigator.push({
title: 'Results',
component: SearchResults,
rightButtonTitle: 'Save',
onRightButtonPress: () => {this.props.navigator.pop();
this.props.save()},
passProps: {listings: words, onWordToggle: this.onWordToggle}
});
this.setState({ isLoading: false , message: '' });
}
onWordToggle(word) {
// add or remove 'word' from e.g. this._selectedWords; no need for
// this.state because re-rendering not required
}
whileSearchResultsは、選択された単語のリストをその中に維持し、単語が追加または削除されるたびにthis.state通知するだけthis.props.onWordToggleです。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加