Передача данных формы в express - PullRequest
Новая
       23

Передача данных формы в express

0 голосов
/ 31 января 2020

Трудно передать некоторые данные express. Я пытаюсь отправить некоторые данные из формы. Значение формы обновляется правильно. Но когда я достигаю своей конечной точки, я не знаю, как выйти, что я прохожу Любые указатели будут высоко ценится.

Express: 

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;

Ответы [ 2 ]

0 голосов
/ 31 января 2020

Вы можете сделать это следующим образом:

FrontEnd: 

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;

Backend: 

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

Надеюсь, это поможет вам.

0 голосов
/ 31 января 2020

Таким образом, вы должны сделать это способом реагирования, который заключается в отслеживании данных в состоянии.

Сначала добавьте функцию для обновления данных handleInputChange. Затем добавьте атрибут name к входному значению, значение которого необходимо обновить. Проверьте ниже и узнайте больше о Реактивных формах 

import React from "react";
import axios from "axios";

const Form = () => {
  // Set initial state 
  const [values, setValues] = React.useState({fullName: ''})

  // Add a function to update the value of your input fields
  handleInputChange(event) {
     const target = event.target;
     const value = target.type === 'checkbox' ? target.checked : target.value;
     const name = target.name;

     setValues({ ...values, [name]: value })
  }

  function post(event){
    event.preventDefault();
    let name = document.getElementById('full-name').value;

    let data = {
      name: values.fullName, // get the value of the input field from the state
    };

    axios.post('http://localhost:9000/something-to-post', data)
      .then(response => {
        // todo
      })
      .catch(error => {
        // todo
      })
   }
}

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

export default Form;
...