React.js国家问题

Question

I have the below jsfiddle I am trying to filter the records so when once category is selected I only want to show results for that category. Not sure what I am missing with states.

https://jsfiddle.net/kkhwabzr/

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

Answer 1

You need to monitor the selection state from the main App component. Right now you're keeping track of the selection in the MySelect component. That means the App component doesn't have that information and cannot pass it to the DisplayRecords component as a prop.

The correct way to do it is keep the selection as a state variable in the App component, and pass both its value and the onChange handler as props to the MySelect component:

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

As pointed out before, you can use a filter to get the correct records, but you should also account for the "all requests" case where you want to return all the records, hence:

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

See the jsfiddle for a working example of your code: https://jsfiddle.net/kkhwabzr/3/

I've modified it as little as possible so you can understand how the code was changed between yours and the working version. Note that I also added the tags as recommended when using React ( Removing row from table results in TypeError ) and changed the {value: ...} values to be consistent between the record.status and the component state.