从React JS发送选定的下拉值到Django ORM

时间:2018-10-08 15:04:11

标签: django reactjs django-models orm django-rest-framework

我在react中有前端代码,可以从下拉列表中选择值。我想将此值发送到django views.py文件,以便可以在ORM中使用它进行过滤。 下拉菜单的选项值也来自django后端。 下拉菜单中选择的值是用于ORM中过滤器的Customer_Id之一。

以下是反应代码。

import PropTypes from 'prop-types';
import React, { Component } from 'react';
import ReactSelect from 'react-select';

class Select extends React.Component {
     static propTypes = {
     onChange: PropTypes.func,
     name: PropTypes.string,
     value: PropTypes.string,
};

constructor(props) {
    super(props);

    this.state = {
    error: false,
    value: props.default,
};

this.handleChange = this.handleChange.bind(this);
}

handleChange(event) {
    this.setState({value: event.target.value});
}

render() {
   let dropdowns = this.props.state.dropdowns;
   let optionitems = dropdowns.map((dropdown) => {
        return(
          <option key={dropdown.auto_increment_id} value={dropdown.auto_increment_id}>
          {dropdown.customerName}
          </option>
        );
        }

  );

return (
  <div>
    <select value={this.state.value} onChange={this.handleChange}>
      Select Customer Name
      {optionitems}
    </select>
    <p>{this.state.value}</p> // want to send this value to views.py
  </div>
   );
  }
 }
export default Select;

以下是views.py代码:

from psiApp.models import Proactive,CustomersName
from psiApp.serializers import LogSerializer,CustSerializer
from rest_framework import generics

class ListView(generics.ListCreateAPIView):
    queryset = Proactive.objects.all() 
    //Want something like: Proactive.objects.filter(Customer_id=value from react)
    serializer_class = LogSerializer

我希望问题很明确,我是从事React和Django结合工作的新手。任何想法表示赞赏! 从前端到后端发送价值对我来说是很新的东西。 提前致谢。

1 个答案:

答案 0 :(得分:0)

它需要ajax请求。万一有人滚动到这里。