我正在使用 react-komposer 包构建一个带有 Meteor 的应用程序。这很简单:有一个顶级组件 ( App ),其中包含一个搜索表单和一个结果列表。该列表通过 komposer 容器 ( AppContainer )提供的 props 获取其条目。在我尝试实施搜索以缩小列表中显示的结果之前,它工作得很好。
这是我开始使用的代码(AppContainer .jsx):
import { Meteor } from 'meteor/meteor';
import { composeWithTracker } from 'react-komposer';
import React, { Component } from 'react';
import Entries from '../api/entries.js';
import App from '../ui/App.jsx';
function composer(props, onData) {
if (Meteor.subscribe('entries').ready()) {
const entries = Entries.find({}).fetch();
onData(null, {entries});
};
};
export default composeWithTracker(composer)(App);
应用程序只是呈现出整个条目列表。我想要实现的是将查询参数传递给Entries.find({}).fetch();
来自App组件的数据(例如通过文本输入捕获)。换句话说:如何将参数从App (子)组件输入到AppContainer中,以便搜索特定条目并最终重新呈现相应的结果?
为了进一步澄清,这里是 App.jsx 的代码:
import React, { Component } from 'react';
export default class App extends Component {
render() {
return (
<div>
<form>
<input type="text" placeholder="Search" />
</form>
<ul>
{this.props.entries.map((entry) => (
<li key={entry._id}>{entry.name}</li>
))}
</ul>
</div>
);
}
}
提前致谢!