ReactJS:如何将状态值放入容器? [英] 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.

组件的数据来自一个容器(使用 npmmeteor/react-meteor-data).

The data for the component comes from a container (using 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?

容器/example.js

export default createContainer((prop) => {
    Meteor.subscribe('images', searchString) // How to get searchString?
    return { files: Images.find({}).fetch() }
}, Example)

component/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

出版物

Meteor.publish('images', function(search) {
    return Images.find({ title: search }).cursor
})

推荐答案

也许你可以创建两个不同的组件:一个父组件和一个子组件，你可以像下面这样用 createContainer HOC 包裹子组件

Maybe you can create two different components: a parent and a child, and you can wrap child component with createContainer HOC like the following

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

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

这个想法是，由于 createContainer 是一个高阶组件，它无法访问由它包装的任何组件的 props.

The idea is, since createContainer is a higher order component, it doesn't have access to the props of any component wrapped by it.

我们需要做的是，从父组件传递searchString 的值.方法如下:ExampleWrapper 有一个名为 searchString 的状态，Example 组件有一个名为 searchString 的 prop.我们可以将 searchString 属性的值设置为 state.searchString.由于 default export 对应于 createContainer({..some logic...}, Example})，createContainer 可以利用名为 searchString.

What we need to do is, passing the value of searchString from a parent component. The way to do is the following: ExampleWrapper has a state called searchString and Example component has a prop called searchString. We can set the value of searchString prop to state.searchString. Since the default export corresponds to createContainer({..some logic…}, Example}), createContainer can make use of prop called searchString.

为了改变state.searchString 的值，我们还将searchImage 函数作为prop 传递给Example 组件.每当发生更改事件时，onChange 会触发更新 state.searchString 值的 searchImage 函数.最终，state.searchString 的值改变 searchString 属性值的那一刻，你的订阅结果也会改变

In order to change the value of state.searchString we also passed searchImage function as a prop to Example component. Whenever there is a change event, onChange triggers searchImage function that updates the value of state.searchString. And eventually, the minute the value of state.searchString changes searchString prop’s value changes thus your subscription result also changes

这篇关于ReactJS:如何将状态值放入容器?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！