如何在ReactJS中过滤数据收集

Question

我是ReactJS的新手,我正试图弄清楚它是如何工作的.

我在JsBin中玩了一点,我已成功创建了一些组件来从api中获取数据......但是,当我尝试实现代码来过滤该集合时,我感到有些困惑.

这是我试图实现过滤器功能的JsBin链接.

你能帮我理解为什么它不起作用吗？谢谢.

Answer 1

在组件中ContentList，它应该使用this.props.filterTextwhich 来获取输入的值并与您的数据进行比较。当输入值改变时，React会重新渲染包含this.state.filterText. 您可以使用maporfilter方法来过滤它。这是一个例子：

var ContentList = React.createClass({

    render: function() {
        var commentNodes = this.props.data.map(function(content) {
                 if(content.description === this.props.filterText){ <-- this makes the filter work !
                    return <ItemRow title={content.owner.login} body={content.description} slug={content.owner.avatar_url}></ItemRow>}
            })
        return (
            <div className='contentList'>
                {commentNodes}
            </div>
        )
    }
})