在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