0
私は自分のコンポーネントに（それがnavbarにあるように）検索バーを持っていて、Session.setを使って別のコンポーネントで使用する変数を作成しますセッション変数を使用して反応流星の検索バーからmongoコレクションを照会
updateSearch(e){
Session.set('searchTerm', e.target.value);
console.log(Session.get('searchTerm'));
}
render(){
return(
<div>
<form>
<div className="form-group">
<input type="text" className="form-control" placeholder="Search Tickets"
// value={this.state.search}
onChange={this.updateSearch.bind(this)}/>
</div>
</form>
</div>
)
}
}
これにより、検索語が入力されたときに正常に作成されます。問題は、コレクションのリストを表示するためにリストコンポーネントの変数 'searchTerm'を使用しようとするときです。
import { Tickets } from '../../../imports/collections/tickets';
import TicketSearch from './TicketSearch';
export default class TicketList extends React.Component {
constructor (props) {
super(props);
this.state = {
tickets: [],
searchTerm: ''
};
}
componentDidMount() {
this.ticketTracker = Tracker.autorun(() => {
Meteor.subscribe('tickets');
let searchTerm = Session.get('searchTerm');
if (searchTerm) {
let tickets = Tickets.find({$in: { talent: searchTerm}}).fetch()
this.setState({ tickets });
}
else {
let tickets = Tickets.find({}).fetch();
this.setState({ tickets });
}
});
}
componentWillUnmount() {
console.log('componentWillUnmount TicketList');
this.ticketTracker.stop();
}
renderTicketList() {
if (!this.state.tickets.length) {
return (
<div>
<p>No Tickets Found</p>
</div>
)
}
return this.state.tickets.map((ticket) => {
return (
<div>
{ticket.talent}
{ticket.city}
</div>
)
render() {
return(
<div>
{this.renderTicketList()}
</div>
);
}
};
チケットリストコンポーネントは、検索バーに何かが入力される（その部分が機能している）まで、すべてのチケットを表示する必要があります。検索バーを使用した後、理想的には、searchTermはコレクションの「才能」または「都市」フィールドに一致するチケットをフィルタリングします。あなたのコードにはタイプミスや論理的なバグが存在しないと仮定すると、