Question

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

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

Answer 1

您需要从主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和组件状态之间的一致。

React.js国家问题

1 个答案: