在react.js中过滤记录

假设我有一个记录列表，并且想根据用户所做的选择框选择来对它们进行过滤。我有jsfiddle中的细节。在react.js中过滤记录

所以如果用户选择1-10仅在1〜10这些数字应显示。我们如何添加一个事件处理程序来过滤所有记录？

var numbers = [ 
    {"number":1}, {"number":2}, {"number":3}, {"number":4}, {"number":5}, {"number":6}, {"number":7}, {"number":1}, {"number":1}, {"number":1}, {"number":1}, {"number":1}, {"number":1}, {"number":18}, {"number":11}, {"number":1}, {"number":1}, {"number":1}, {"number":1}, {"number":1}, {"number":21}, {"number":41}, {"number":1}, {"number":1}, {"number":1}, {"number":1}, {"number":1},  {"number":14}, {"number":1}, {"number":1}, {"number":1}, {"number":1}, {"number":1}, {"number":81}, {"number":12}, {"number":1}, {"number":1}, {"number":1}, {"number":1}, {"number":1}, {"number":1}, {"number":111} 
]; 
var DisplayNumbers = React.createClass({  
render: function(){ 

return (
<div> 
    {this.props.allnumbers} 
    </div> 
); 
} 
     }); 
var FilterBox = React.createClass({ 
     getInitialState: function() { 
     return { selected: "1-10" } 
     },  

      render: function() { 
     return (
      React.createElement("select", { value: this.state.selected }, 
      React.createElement("option", { value: 1 }, "1-10"), 
      React.createElement("option", { value: 2 }, "11-20"), 
      React.createElement("option", { value: 3 }, "21-30"), 
      React.createElement("option", { value: 4 }, "31-40") 
     ) 
     ) 
     } 
    }); 


var App = React.createClass({ 
    render: function() {    
     return (
     <div> 
      <FilterBox /> 
         <h1>Requests</h1> 
       <DisplayNumbers allnumbers={this.props.data} /> 
      </div> 
     ); 
    } 
}); 
ReactDOM.render(<App data={numbers}/>, document.getElementById('container'));

来源

2016-05-01 Jay

JS小提琴只包含一个hello世界的例子。 – sahil