Javascript ReactJS：如何将状态值放入容器？

我需要根据搜索字符串值从数据库中获取数据。因此，我使用的是一个输入字段。搜索字符串存储为状态值

组件的数据来自容器（使用npm meteor/react meteor数据）

现在我的问题是，如何将搜索字符串放入容器中以设置发布的参数

容器/example.js

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

const Example = (props) => {
    return <Input onChange={props.searchImage}/>
}

export default createContainer(({searchString}) => {
Meteor.subscribe('images', searchString)
    return { files: Images.find({}).fetch() }
}, Example)

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

组件/示例.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

这就是我们为内部状态属性赋值的方式：）

---

编辑：我似乎误解了这个问题…

也许您可以创建两个不同的组件：父组件和子组件，您可以使用createContainer HOC包装子组件，如下所示

childComponent.js

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

const Example = (props) => {
    return <Input onChange={props.searchImage}/>
}

export default createContainer(({searchString}) => {
Meteor.subscribe('images', searchString)
    return { files: Images.find({}).fetch() }
}, Example)

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

const示例=（道具）=>{
返回
}
导出默认createContainer（（{searchString}）=>{
Meteor.subscribe（'images'，searchString）
返回{files:Images.find（{}）.fetch（）}
}，举例）

parentComponent.js

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

const Example = (props) => {
    return <Input onChange={props.searchImage}/>
}

export default createContainer(({searchString}) => {
Meteor.subscribe('images', searchString)
    return { files: Images.find({}).fetch() }
}, Example)

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

class ExampleWrapper扩展组件{
建造师（道具）{
超级（道具）
此.state={
搜索字符串：“”
}
}
searchImage=（事件）=>{
const searchString=event.target.value
this.setState（{searchString}）
}//除了绑定此函数，还可以使用
//负责装订
render（）{
返回（）
}
}
导出默认的ExampleWrapper

其思想是，由于

createContainer

是一个高阶组件，因此它无法访问由它包装的任何组件的道具

我们需要做的是，从父组件传递

searchString

的值。 方法如下：

ExampleWrapper

有一个名为

searchString

的状态，

Example

组件有一个名为

searchString

的属性。我们可以将

searchString

prop的值设置为

state.searchString

。 由于

默认导出

对应于

createContainer（{..some logic…}，Example}）

，

createContainer

可以使用名为

searchString

的属性

为了更改

state.searchString

的值，我们还将

searchImage

函数作为道具传递给

Example

组件。每当发生更改事件时，

onChange

触发更新

state.searchString

值的

searchImage

函数。最后，

state.searchString

的值会随着时间的推移而改变

searchString

prop的值也会随之改变，因此您的订阅结果也会随之改变