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