ReactJS:如何将状态值放入容器?

IT技术 javascript reactjs meteor
2021-05-18 09:28:53

我需要根据搜索字符串值从数据库获取数据。因此我正在使用输入字段。搜索字符串存储为状态值。

组件的数据来自一个容器(使用 npmmeteor/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
})
2个回答

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

子组件.js

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

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

父组件.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呼吁的状态searchStringExample成分有一个名为propssearchString我们可以将searchStringprop的值设置state.searchString既然default export对应createContainer({..some logic…}, Example})createContainer就可以利用 prop 调用searchString

为了改变state.searchString我们的值,我们还将searchImage函数作为props传递Example组件。每当发生更改事件时,都会onChange触发searchImage更新 值的函数state.searchString最终,state.searchString更改searchStringprop 的值更改的那一刻,您的订阅结果也会更改

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

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

编辑:我似乎误解了这个问题......