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

如何在ReactJS中过滤数据收集

1 个答案: