React / Meteor：如何从组件到关联容器的数据？

Question

I'm getting the data for my List component from a container. So far everything is fine.

There is an input field and a list of items (files). Right now there are thousands items and it doesn't make sense to show them all. Thats why I would like to use a search field to get only matching items.

Typing a value to the input field will use search() , but now I need to get this value into the container element to get the specific data.

How do I get the value into the 'parent' container? Or maybe this kind of search has to be done completely different?

/containers/list.js

import { createContainer } from 'meteor/react-meteor-data'
import List from '../components/List.jsx'

export default createContainer(() => {
  const subscription = Meteor.subscribe('files.all') // <-- better get specific data..., so use search term
  const files = Files.find().fetch()

  return { files }
}, List)

/components/List.jsx

export default class List extends Component {

  search (event, data) {
    const term = data.value
    console.log(term) // <-- term has to be used in the container...?
  }

  render () {
    const { files } = this.props

    const filesList = files.map((file, key) => {
      return (
        <ListFile
          key={'file' + key}
          file={file}
        />
      )
    }) || null

    return (
      <div id='list'>
        {
          filesList && 
          <div>
            <Input onChange={this.search.bind(this)}/>
            <Item.Group>
              { filesList }
            </Item.Group>
          </div>
        }
      </div>
    )
  }
}

Answer 1

Two options that I can think of:

1) Use Session (Meteor specific option). 2) Use Redux (Can be used in general).

Since you are using Meteor and it is out of the box there, I would advise to use Session.

In both parent and child import Session

import { Session } from "meteor/session";

In parent createContainer, do something like

const searchQuery = Session.get("searchQuery");

apply searchQuery in subscription or in Files.find() as you wish

return { files, searchQuery }

In child component, do something like

search (event, data) {
    const term = data.value
    console.log(term) 
    Session.set("searchQuery", term);
}