React.js 状态问题

Question

我有一个jsfiddle，我正在尝试过滤记录，因此当选择一个类别时，我只想显示该类别的结果。不确定我的状态缺少什么。 https://jsfiddle.net/kkhwabzr/

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

- Jay

Answer 1

你需要从主应用程序组件中监视选择状态。现在，你正在跟踪MySelect组件中的选择。这意味着App组件没有该信息，无法将其作为prop传递给DisplayRecords组件。

正确的方法是将选择保留为App组件中的状态变量，并将其值和onChange处理程序作为prop传递给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 时，我还添加了建议使用的 <tbody> 标签（从表格中删除行会导致 TypeError），并将 {value: ...} 值更改为记录状态和组件状态之间的一致。

- Frederick Motte