如何基于Django REST Framework实现React向后端提交textarea输入值

1. 前端React组件改造（适配你现有类组件写法） #

你目前的textarea是非受控组件，无法直接获取输入值，仅需基于现有代码做3处调整，不需要重构组件结构：

• 给组件增加内部状态，实时存储textarea的输入内容，改造为受控组件模式
• 拦截表单默认提交行为，避免页面自动刷新
• 用已引入的axios，把捕获到的输入值POST到Django对应接口

改造后的完整前端代码（完全沿用你原有组件结构）：

import React, { Component } from 'react';
import axios from 'axios';

class QueryBuilder extends Component {
  // 初始化状态，存储textarea输入值
  constructor(props) {
    super(props);
    this.state = {
      queryText: ''
    }
  }

  // 同步textarea输入值到组件状态
  handleTextChange = (e) => {
    this.setState({
      queryText: e.target.value
    })
  }

  // 处理表单提交：拦截默认行为+发送请求
  handleFormSubmit = async (e) => {
    // 阻止表单默认的页面跳转刷新逻辑
    e.preventDefault();
    try {
      // 将textarea输入值打包为JSON，POST到Django对应接口
      const res = await axios.post('你的Django路由地址（例如/api/query-test/）', {
        text: this.state.queryText
      }, {
        headers: {
          'Content-Type': 'application/json'
        }
      })
      // 可在此处拿到后端返回的执行结果做页面展示
      console.log('后端返回结果：', res.data)
    } catch (err) {
      console.error('请求发送失败：', err)
    }
  }

  render() {
    return (
      <div>
        <form onSubmit={this.handleFormSubmit}>
          {/* 原textarea绑定状态与变更事件 */}
          <textarea 
            cols="100" 
            rows="20" 
            name="text" 
            value={this.state.queryText}
            onChange={this.handleTextChange}
          />
          <br /><br />
          {/* 按钮指定submit类型，触发表单提交流程 */}
          <button type="submit">Execute Query</button>
        </form>
      </div>
    )
  }
}

export default QueryBuilder;

2. Django后端适配（完全沿用你现有DRF + MongoDB逻辑） #

你目前的TestViewset是默认ModelViewSet实现，没有处理POST请求的入参逻辑，仅需在现有类内做小调整，不需要重写整个视图：

• 重写ModelViewSet自带的create方法，从请求载荷中获取前端传递的textarea文本值
• 把原本要执行的MongoDB操作逻辑，替换为以传入文本值为参数执行的业务逻辑
• 保留现有MongoClient连接逻辑、权限配置，不改动原有依赖

改造后的views.py代码（完全基于你现有代码调整）：

from django import db
from django.shortcuts import render, HttpResponse
from rest_framework import generics
from .models import Test
from .serializers import TestSerializer
from pymongo import MongoClient
from ast import literal_eval
from rest_framework import viewsets, permissions
from rest_framework.response import Response

#Test Viewset
class TestViewset(viewsets.ModelViewSet):
    client = MongoClient()
    db = client.test
    permission_classes = [
        permissions.AllowAny
    ]
    
    serializer_class = TestSerializer

    # 重写create方法，接收前端POST的文本值
    def create(self, request, *args, **kwargs):
        # 从请求载荷中获取与前端字段名对齐的text值
        input_text = request.data.get('text', '')
        # 在此处执行你的指定功能：例如用input_text作为参数做MongoDB查询
        query_result = self.db['queryTest_test'].find({"你的查询匹配字段": input_text})
        # 将游标结果转为可序列化格式返回给前端
        result_list = list(query_result)
        return Response({
            "code": 0,
            "message": "执行成功",
            "data": result_list
        })

注意：本地联调时如果遇到跨域报错，仅需按照DRF跨域配置要求安装对应依赖、添加中间件配置即可，不需要改动现有业务逻辑。

3. 联调校验关键点 #

• 确认前端请求URL与Django urls.py中注册的Viewset路由完全匹配，不要遗漏路由前缀
• 检查textarea的value绑定逻辑、onChange事件绑定是否正确，避免状态不同步导致拿到空值
• 确认后端从request.data中取的字段名与前端POST的字段名完全一致（本例中统一为text），避免取值失败

内容的提问来源于stack exchange，提问作者Tolani