reactjs - 传递表格数据来表达

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

前端：

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');
})

希望对您有所帮助。