javascript - 如何过滤 ReactJS 中的数据收集

Question

我是 ReactJS 的新手，我想弄清楚它是如何工作的。

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

这是 JsBin link我正在尝试实现过滤器功能。

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

Answer 1

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

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>
        )
    }
})