Question

我从容器中获取List组件的数据。到目前为止一切都很好。

有一个输入字段和一个项目列表（文件）。现在有成千上万的物品，显示它们并没有意义。这就是为什么我想使用搜索字段来获取匹配的项目。

在输入字段中键入值将使用search()，但现在我需要将此值放入容器元素中以获取特定数据。

如何将价值纳入“父母”中？容器？或者这种搜索必须完全不同？

/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

我能想到两个选项：

1）使用Session（Meteor特定选项）。 2）使用Redux（一般可以使用）。

由于您使用的是Meteor，并且它是开箱即用的，我建议使用Session。

在父和子导入会话中

从＆＃34; meteor / session＆＃34;;

导入{Session}

在父级createContainer中，执行类似

的操作

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

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

return { files, searchQuery }

在子组件中，执行类似

的操作

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

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

1 个答案: