व्यक्त करने के लिए कुछ डेटा पास करने में कठिन समय हो रहा है। मैं एक फॉर्म से एकत्रित कुछ डेटा भेजने की कोशिश कर रहा हूं। प्रपत्र मान सही ढंग से अद्यतन किया जा रहा है। लेकिन जब मैंने अपना अंतिम बिंदु मारा तो मुझे नहीं पता कि मैं जो गुजर रहा हूं उसे कैसे लॉग आउट करूं। किसी भी संकेत की बहुत सराहना की जाएगी।

एक्सप्रेस:

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;
0
Galactic Ranger 31 जिंदा 2020, 10:52

2 जवाब

सबसे बढ़िया उत्तर

आप इसे नीचे इस कोड की तरह कर सकते हैं:

फ्रंटएंड:

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

उम्मीद है यह आपकी मदद कर सकता है।

0
Titus Sutio Fanpula 31 जिंदा 2020, 12:45

तो आपको यह प्रतिक्रिया तरीके से करने की आवश्यकता है जो राज्य में डेटा का ट्रैक रखता है।

handleInputChange डेटा को अपडेट करने के लिए पहले एक फ़ंक्शन जोड़ें। फिर इनपुट में एक नाम विशेषता जोड़ें जिसे आपको अपडेट करने की आवश्यकता है। नीचे देखें और प्रतिक्रिया फ़ॉर्म के बारे में अधिक पढ़ें

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;
0
lomse 31 जिंदा 2020, 11:10