ReactJS：如何將狀態值放入容器？

Question

我需要根據搜索字符串值從數據庫獲取數據。 因此，我正在使用輸入字段。 搜索字符串存儲為狀態值。

組件的數據來自容器（使用npm meteor / react-meteor-data）。

現在的問題是，如何將搜索字符串放入容器中以設置發布參數？

容器/ example.js

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

組件/ 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
})

Answer 1

onChange={ (e)=> {this.setState({ searchString: $(e.target).val() }) } }

這就是我們為內部狀態屬性分配值的方式：）

編輯：我似乎已經誤解了這個問題...

Answer 2

也許您可以創建兩個不同的組件：父組件和子組件，並且可以使用createContainer HOC包裝子組件，如下所示：

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。

我們需要做的是，從父組件傳遞searchString的值。 方法如下： ExampleWrapper的狀態為searchString ， Example組件的searchString為searchString 。 我們可以將searchString prop的值設置為state.searchString 。 由於default export對應於createContainer({..some logic…}, Example}) ，因此createContainer可以使用稱為searchString的道具。

為了更改state.searchString的值，我們還傳遞了searchImage函數作為對Example組件的支持。 每當發生更改事件時， onChange觸發searchImage函數，該函數將更新state.searchString的值。 最終， state.searchString的值更改的那一刻， searchString的值更改，因此您的訂閱結果也更改