2016-10-28 8 views
0

私は選択ボックスを持っており、サーバーから新しいデータを取り込むためにajaxリクエストを呼び出す必要があります。select chageでAjaxリクエストを呼び出す

class Dashboard extends React.Component { 
constructor(){ 
    super(); 
    this.state = { 
     'dayFilter': "last_day" 
    } 
} 

componentDidMount() { 
    this.getCurrentCampaign(); 
}; 

// get current channels 
getCurrentCampaign(){ 
    client.get('channels', {params: {day_filter: this.state.dayFilter}}).then(res =>{ 
    this.setState({ 
     oCurrentCampaign: res.data 
    }); 
    }) 
}; 

selectDayFilter(selectedSelect){ 
    this.setState({'dayFilter': selectedSelect.value}); 
}; 


render(){ 
    return (
     <div className="_dashboard ng-enter ui-view"> 
      <div className="section"> 
       <h2>Current Channels</h2> 
       <Select value={this.state.dayFilter} className="se_type1" name="form-field-name" searchable={false} options={options} 
       onChange={this.selectDayFilter.bind(this)}/> 
       <CurrentCampaign oCurrentCampaign={oCurrentCampaign}/> 
      </div> 

     </div> 
    ); 
} 

ユーザーが選択から別のオプションを選択したときにselectDayFilterが呼び出された後、状態はgetCurrentCampaignを起動するための最良の方法は何

this.setState({'dayFilter': selectedSelect.value}); 

を設定きているので、フィルタリングされたデータをサーバーから引き出すことができますか?

答えて

1

を役に立てば幸い変更を選択します。私はthis.setStateにコールバックとしてgetCurrentCampaignを渡すことができると思います。 Like:

また、コンポーネントを更新し、次の状態でdayFilterが変更されたかどうかをチェックすることができます。

しかし、どちらのアプローチが最適なのかわかりません。それが役に立てば幸い。

1

私の提案の流れは次のようにする必要があります:

ユーザータイプ代、その後のonChangeトリガselectDayFilter機能あなたは毎回データをフェッチする必要があるため

//Pseudocode 
selectDayFilter(
setState "dayFilter" 
call getCurrentCampaign // ajax request 
) 

getCurrentCampaign(){ 
if ajax.success{ 
setstate "oCurrentCampaign" // it will trigger re-vender 
} 
} 

は、それが

関連する問題