javascript - React.js 状态问题

Question

我有下面的 jsfiddle 我正在尝试过滤记录，所以一旦选择了类别，我只想显示该类别的结果。不确定我在州中缺少什么。

https://jsfiddle.net/kkhwabzr/

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

Answer 1

您需要从 App 主组件监控选择状态。现在您正在跟踪 MySelect 组件中的选择。这意味着 App 组件没有该信息，无法将其作为 prop 传递给 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 和组件状态之间保持一致。