[英]ReactJS: How to get state value into container?
I need to get data from DB depending on a search string value. 我需要根据搜索字符串值从数据库获取数据。 Therefore I'm using an input field.
因此,我正在使用输入字段。 The search string is stored as a state value.
搜索字符串存储为状态值。
The data for the component comes from a container (using npm meteor/react-meteor-data). 组件的数据来自容器(使用npm meteor / react-meteor-data)。
Now my problem is, how do I get the search string into the container to set the parameter for the publication? 现在的问题是,如何将搜索字符串放入容器中以设置发布参数?
container/example.js 容器/ example.js
export default createContainer((prop) => {
Meteor.subscribe('images', searchString) // How to get searchString?
return { files: Images.find({}).fetch() }
}, Example)
component/example.jsx 组件/ example.jsx
class Example extends Component {
constructor(props) {
super(props)
this.state = {
searchString: ''
}
}
searchImage(event) {
const searchString = event.target.value
this.setState({ searchString })
}
render() {
return (<Input onChange={ this.searchImage.bind(this) }/>)
}
}
export default Example
publication 出版物
Meteor.publish('images', function(search) {
return Images.find({ title: search }).cursor
})
onChange={ (e)=> {this.setState({ searchString: $(e.target).val() }) } }
This is how we assign values to our internal state properties :) 这就是我们为内部状态属性分配值的方式:)
EDIT: I appear to have misunderstood the question... 编辑:我似乎已经误解了这个问题...
Maybe you can create two different components: a parent and a child, and you can wrap child component with createContainer HOC like the following 也许您可以创建两个不同的组件:父组件和子组件,并且可以使用createContainer HOC包装子组件,如下所示:
childComponent.js childComponent.js
const Example = (props) => {
return <Input onChange={props.searchImage}/>
}
export default createContainer(({searchString}) => {
Meteor.subscribe('images', searchString)
return { files: Images.find({}).fetch() }
}, Example)
parentComponent.js parentComponent.js
class ExampleWrapper extends Component {
constructor(props) {
super(props)
this.state = {
searchString: ''
}
}
searchImage = (event) => {
const searchString = event.target.value
this.setState({ searchString })
} // instead of binding this, you can also use arrow function that
// takes care of binding
render() {
return (<Example searchImage={this.searchImage} searchString={this.state.searchString} {...this.props} />)
}
}
export default ExampleWrapper
The idea is, since createContainer
is a higher order component, it doesn't have access to the props of any component wrapped by it. 这个想法是,由于
createContainer
是一个高阶组件,因此它无权访问由其包装的任何组件的props。
What we need to do is, passing the value of searchString
from a parent component. 我们需要做的是,从父组件传递
searchString
的值。 The way to do is the following: ExampleWrapper
has a state called searchString
and Example
component has a prop called searchString
. 方法如下:
ExampleWrapper
的状态为searchString
, Example
组件的searchString
为searchString
。 We can set the value of searchString
prop to state.searchString
. 我们可以将
searchString
prop的值设置为state.searchString
。 Since the default export
corresponds to createContainer({..some logic…}, Example})
, createContainer
can make use of prop called searchString
. 由于
default export
对应于createContainer({..some logic…}, Example})
,因此createContainer
可以使用称为searchString
的道具。
In order to change the value of state.searchString
we also passed searchImage
function as a prop to Example
component. 为了更改
state.searchString
的值,我们还传递了searchImage
函数作为对Example
组件的支持。 Whenever there is a change event, onChange
triggers searchImage
function that updates the value of state.searchString
. 每当发生更改事件时,
onChange
触发searchImage
函数,该函数将更新state.searchString
的值。 And eventually, the minute the value of state.searchString
changes searchString
prop's value changes thus your subscription result also changes 最终,
state.searchString
的值更改的那一刻, searchString
的值更改,因此您的订阅结果也更改
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.