React.js国家问题

时间:2016-05-02 00:14:07

标签: javascript reactjs react-native

我有以下的jsfiddle我试图过滤记录,所以当选择一个类别时,我只想显示该类别的结果。不确定我在州里缺少什么。

https://jsfiddle.net/kkhwabzr/

var App = React.createClass({
    render: function() {
        return (
        <div>
            <Instructions />
            <h1>Requests</h1>
        </div>
        );
    }
});

1 个答案:

答案 0 :(得分:0)

您需要从主App组件监视选择状态。现在,您将跟踪MySelect组件中的选择。这意味着App组件没有该信息,也无法将其作为道具传递给DisplayRecords组件。

正确的方法是将选择保留为App组件中的状态变量,并将其值和onChange处理程序作为props传递给MySelect组件:

getInitialState: function() {
    return { selected: "All Requests" }
},

onChange:function(e){
    this.setState({selected: e.target.value})
},

render: function() {
    return (...
        <MySelect selected={this.state.selected} onChange={this.onChange} />
        <DisplayRecords records={this.props.data.filter(this.filterRecord)}
    ...)
}

如前所述,您可以使用过滤器来获取正确的记录,但是您还应该考虑要返回所有记录的“所有请求”情况,因此:

filterRecord: function(record) {
  if(this.state.selected === null) return true;
  return (record.status === this.state.selected || this.state.selected === "All Requests");
}

请参阅jsfiddle以获取代码的工作示例:https://jsfiddle.net/kkhwabzr/3/

我尽可能少地修改它,这样你就可以理解你的代码和工作版本之间的代码是如何改变的。请注意,我在使用React(Removing row from table results in TypeError)时也按照建议添加了标记,并将{value:...}值更改为record.status和组件状态之间的一致。