だから、私はこのような 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として返し、反応コンポーネントがそれを取得して適切に表示しています。私の質問は、ユーザーが検索フォームにキーワードを入力したときに検索を機能させる方法ですか? スタックオーバーフローの他の例を試しましたが、うまくいきませんでした。何かが足りないことはわかっていますが、何がわかりません。ありがとう!