如何将 React 原生表单连接到表达后端

Question

我已经创建了一个表单来提交一些反应原生的数据。现在我需要连接它现有的快递后端。帮助我做到这一点。我是反应原生的初学者。以下代码是后端。现在我需要使用 express 后端向 SQL 服务器提交产品 ID 和描述。我怎样才能做到这一点。我的快递后端不能改变。更改应该只发生在我在本文底部提到的本机代码中。

router.post('/lodge-complaint', verifyToken, verifyCustomer, async (request, response) => {

    const pool = await poolPromise;
    try {
        pool.request()
            .input('_customerEmail', sql.VarChar(50), request.payload.username)
            .input('_productID', sql.Int, request.body.productID)
            .input('_description', sql.VarChar(5000), request.body.productID)
            .execute('lodgeComplaint', (error, result) => {
                if (error) {
                    response.status(500).send({
                        status: false
                    });
                } else {
                    console.log(JSON.stringify(result) + ' 75 admin.js');
                    response.status(200).send({
                        status: true
                    });
                }
            });
    } catch (e) {
        response.status(500).send({status: false});
    }
});

我的反应原生形式是：

import * as React from 'react';
import {Button, View, Text, ScrollView, StyleSheet} from 'react-native';
import {Appbar} from 'react-native-paper';
import {TextInput, HelperText} from 'react-native-paper';
import {useState , useEffect} from 'react';
import Axios from 'axios';
import {complaintSubmission} from '../../services/complaint-submissionService';

const ComplaintSubmission = ({navigation}) => {
  
    const [productID , setproductID] = useState("")
    const [complaintSubject , setcomplaintSubject] = useState("")
    const [description , setdescription] = useState("")

 

  return (
    <ScrollView>
      <Appbar.Header>
        <Appbar.BackAction onPress={() => navigation.openDrawer()} />
        <Appbar.Content title="Submit Complaint" />
        <Appbar.Action icon="magnify" onPress={() => navigation.openDrawer()} />
      </Appbar.Header>
      <Text>Plese Fill the following</Text>
      <View>
        <TextInput
          style={styles.PIDstyle}
          label="Product ID"
          onChange={ (e) =>{
              setproductID(e.target.value)
          }}
          // value={text}
        />
        <HelperText type="error">
          {/*<HelperText type="error" visible={hasErrors()}>*/}
          Product ID Required
        </HelperText>
      </View>
      
      <TextInput
        style={styles.PIDstyle}
        label="Description"
        onChange={ (e) =>{
            setdescription(e.target.value)
        }}
        // value={text}
      />
      <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
        <Text>This is submittion</Text>
        <Button onPress={() => } title="Submit Complaint" />
      </View>
    </ScrollView>
  );
};
export default ComplaintSubmission;
const styles = StyleSheet.create({
  PIDstyle: {
    marginTop: 30,
    marginLeft: 10,
    marginRight: 10,
  },
});

我需要在 React 原生代码中实现什么功能。

Answer 1

在你的组件内部创建一个新函数，比如handleSubmit()，并在内部使用 axios（或 fetch）将信息发送到后端，这个新函数应该在这里调用 <Button onPress={() => handleSubmit()} title="Submit Complaint" />。

axios请看本教程：https://blog.logrocket.com/how-to-make-http-requests-like-a-pro-with-axios/

函数应该是这样的：

const handleSubmit = async () => {
    const response = await axios({ 
    method: 'post',
    url: '/login',
    data: JSON.stringify({
      complainid: complainid,
      Description: description
    }));
// Handle the response

 }