प्रतिक्रिया में पोस्ट अनुरोध के साथ मुद्दा
बटन क्लिक काम कर रहा है, क्योंकि मैं लॉग देख सकता हूं लेकिन POST अनुरोध नहीं होता है। मैंने एक सरल इनपुट बॉक्स बनाया है, और जब बटन पर क्लिक किया जाता है, तो उसे सर्वर पर एक पोस्ट अनुरोध भेजना चाहिए।
मैं यह पता नहीं लगा सकता कि POST का अनुरोध कभी क्यों नहीं होता है, इसलिए कृपया मुझे इसका पता लगाने में मदद करें।
टिप्पणी .js:
import React from 'react';
export class Comment extends React.Component {
constructor(props){
super(props);
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
//SEND POST request
console.log('handling click');
const xhr = new XMLHttpRequest();
const URL = "http://localhost:8080/api/comments"
xhr.onreadystatechange = () => {
if(xhr.readyState === XMLHttpRequest.DONE){
console.log('POST request sent, comment posted.')
}
xhr.open('POST',URL);
xhr.setRequestHeader('Content-type', 'text/plain');
xhr.send(document.getElementById('comment-box').value);
}
}
render(){
const comment_form = (
<div className="posts">
<input type="text" id="comment-box" name="comment" placeholder="Say something nice." />
<button className="submit-button" type="button" onClick={this.handleClick}> Comment </button>
</div>
);
return comment_form;
}
}
जवाब
आपके पास वाक्य रचना की गलती थी जैसे onReadyState ईवेंटहैंडलर का बंद होना सही जगह नहीं था
import React from "react";
import "./styles.css";
export class Comment extends React.Component {
constructor(props) {
super(props);
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
//SEND POST request
console.log("handling click");
const xhr = new XMLHttpRequest();
const URL = "http://localhost:8080/api/comments";
xhr.onreadystatechange = () => {
if (xhr.readyState === XMLHttpRequest.DONE) {
console.log("POST request sent, comment posted.");
}
};
xhr.open("POST", URL);
xhr.setRequestHeader("Content-type", "text/plain");
console.log(document.getElementById("comment-box").value);
xhr.send(document.getElementById("comment-box").value);
}
render() {
const comment_form = ( <
div className = "posts" >
<
input type = "text"
id = "comment-box"
name = "comment"
placeholder = "Say something nice." /
>
<
button className = "submit-button"
type = "button"
onClick = {
this.handleClick
} >
{
" "
}
Comment {
" "
} <
/button> <
/div>
);
return comment_form;
}
}
उत्तर
एरो फंक्शन बाइंड this
और onreadystatechange callback को कब कहा जाता है this === Comment
। तो xhr.onreadystatechange काम नहीं कर रहा है।
xhr.onreadystatechange = function() {
if(xhr.readyState === XMLHttpRequest.DONE){
console.log('POST request sent, comment posted.')
}
मुझे लगता है कि नीचे संदर्भ आपके लिए उपयोगी है। यह प्रतिक्रिया से नहीं बल्कि एरो फंक्शन से समस्या है।
यह संदर्भ उस समस्या के बारे में अधिक स्पष्ट रूप से लिख रहा है।
संदर्भ
- समारोह रूपांतरण के लिए जावास्क्रिप्ट पुराना सिंटैक्स