0

だから、私はこのような React-Component (search_alerts.es6.jsx) を持っています

class SearchAlerts extends React.Component {

constructor(props) {
super(props);
console.log(this.props);

this.state = {
  alertsArray: this.props.alerts,
  zipCode: null,
  bloodReq: null,
  minCompensation: null,
  maxCompensation: null,
  requiredTime: null,
  location: null,
  bloodType: null,
  keyWord: null
}

console.log(this.state.alertsArray);
}
........

get メソッドの呼び出しを担当する ajax 呼び出しは次のようになります。

  $.ajax({
    data: JSON.stringify(stringit),
    type: "GET",
    url: `/findalerts/`,
    contentType: "application/json",
    dataType: "json",
    success: function(data) {
      console.log("Ajax Passed ");
      console.log(data);

      this.setState({
        alertsArray: data
      });

    }.bind(this),
    error: function(data) {
      console.log("Ajax failed: ");
      console.log(data);
    }.bind(this)
  });

私のroutes.rbで、私はこれをやっています

get '/findalerts', to: 'alerts#index' #Search Alerts

そして私のalerts_controllerで

def index
@alerts = Alert.search(params[:keyword])
end

検索のために、私はalert.rbでこれをやっています

def self.search(search)


    @alerts  = Alert.where("ZipCode LIKE :search ", search: "%#{search}%")
    @alerts += Alert.where("compensation LIKE :search ", search: "%#{search}%")

    @alerts += User.search(search)

end

このようにURLにクエリを渡すと、

http://localhost:3000/findalerts?keyword=117

たとえば、郵便番号が117から始まるすべてのアラートをjsonとして返し、反応コンポーネントがそれを取得して適切に表示しています。私の質問は、ユーザーが検索フォームにキーワードを入力したときに検索を機能させる方法ですか? スタックオーバーフローの他の例を試しましたが、うまくいきませんでした。何かが足りないことはわかっていますが、何がわかりません。ありがとう!

4

0 に答える 0