时间戳

首页 > 解决方案 > 将选定的下拉值从 react js 发送到 django ORM

django - 将选定的下拉值从 react js 发送到 django ORM

问题描述

我在反应中有前端代码，它从下拉列表中给出了选定的值。我想将此值发送到 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 相结合是新手。任何想法表示赞赏！将值从前端发送到后端对我来说是非常新鲜的事情。提前致谢。

标签： djangoreactjsdjango-modelsormdjango-rest-framework

解决方案

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

推荐阅读