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 worldの例しか含まれていません。 – sahil

@Scarysizeはあなたのフォーム要素にonChangeイベントハンドラを提供する必要があります示唆したように。またDisplayNumbersコンポーネントでは、jsオブジェクトの配列をレンダリングしようとしていますが、反応するとjsオブジェクトがレンダリングされません。そのようにレンダリングするには、法的な反応コンポーネントの配列でなければなりません。

このフィドルでは、https://jsfiddle.net/sehrob/r4c2ycmc/ - コードを変更して実行可能にしました。あなたが望むならそれを使うことができます。

P.S. Thinking in Reactは、アプリを実装するのにも非常に便利です。

出典

2016-05-01 08:45:44 sehrob