React.js State Issue

Question

私は以下を持っていますjsfiddle私はレコードをフィルタリングしようとしています。一度カテゴリを選択すると、そのカテゴリの結果を表示したいだけです。私が州で何が欠けているか分からない。

https://jsfiddle.net/kkhwabzr/

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

Answer 1

あなたは、メインのアプリケーションコンポーネントから選択状態を監視する必要があります。今は、MySelectコンポーネントの選択を追跡しています。つまり、Appコンポーネントにはその情報がなく、DisplayRecordsコンポーネントにその情報を渡すことはできません。

それを行うための正しい方法は、Appコンポーネントで状態変数として選択を維持し、MySelectとコンポーネントへの小道具としての価値とのonChangeハンドラの両方に合格している：

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（Removing row from table results in TypeError）を使用するときに推奨されるようにタグを追加し、{value：...}の値をrecord.statusとコンポーネントの状態の間で一致させるように変更しました。