温馨提示:本文翻译自stackoverflow.com,查看原文请点击:reactjs - Passing form data to express

reactjs - 传递表格数据来表达

发布于 2020-03-27 15:39:49

很难传递一些数据来表达。我正在尝试发送从表单收集的一些数据。表单值正在正确更新。但是,当我到达终点时,我不知道如何注销正在通过的内容。任何指针将不胜感激。

表达:

app.post('/something-to-post', cors(corsOptionsDelegate), (req, res)=> {
 //how do I log what I am passing from the form 
  console.log('full name:', req.data);
});

反应

import React, {useState} from "react";
import axios from "axios";

const Form = () => {
  const [fullName, setFullName] = useState('');

  function handleInputChange(event) {
    setFullName(event.target.value); // updates state properly
  }

  function post(event){
    event.preventDefault();
    console.log('full name:', fullName); // logs out correctly
    axios.post('http://localhost:9000/something-to-post', {name: fullName})
      .then(response => {
        // todo
      })
      .catch(error => {
        // todo
      })
   }
}

return (
  <form onSubmit={post}>
    <input type="text" value={fullName} onChange={handleInputChange}/>
    <button type="submit">Submit</button>
  </form>
  )
 };

export default Form;

查看更多

查看更多

提问者
Galactic Ranger
被浏览
57
Titus Sutio Fanpula 2020-01-31 17:45

您可以像下面的代码一样进行操作:

前端:

import React, {useState} from "react";
import axios from "axios";

const Form  = () => {
  const [fullName, setFullName] = useState('');

  function handleInputChange(event) {
    setFullName(event.target.value); // updates state properly
  }

  function post(event){
    event.preventDefault();
    console.log('full name:', fullName); // logs out correctly
    axios.post('http://localhost:9000/something-to-post', {name: fullName})
      .then(response => {
        console.log(response.data);
      })
      .catch(error => {
        console.log(error.data)
      })
   }
  return ( 
    <form onSubmit={post}>
    <input type="text" value={fullName} onChange={handleInputChange}/>
    <button type="submit">Submit</button>
  </form>
   );
}

export default Form;

后端:

const express = require('express');
const cors = require('cors');

const app = express();

app.use(cors());
app.use(express.json());
app.use(express.urlencoded({ extended: true }));

app.post('/something-to-post', (req, res) => {
  console.log(req.body);
  console.log(req.body.name);
  const response = {
    success: true,
    code: 200,
    message: 'Data from backend',
    data: req.body
  }
  res.status(200).send(response);
})

app.listen(9000, () => {
  console.log('Server is up');
})

希望对您有所帮助。

发布
问题

分享
好友

手机
浏览

扫码手机浏览