Проблема с запросом POST в React
Нажатие кнопки работает, поскольку я вижу журнал, но запрос POST не выполняется. Я сделал простое поле ввода, и при нажатии кнопки он должен отправить запрос POST на сервер.
Я не могу понять, почему запрос POST никогда не выполняется, поэтому, пожалуйста, помогите мне разобраться.
Comment.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;
}
}
Ответы
3 Asutosh
У вас была синтаксическая ошибка, например, закрытие} обработчика событий 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;
}
}
1 StarkJeon
Ответ
this
Привязка стрелочной функции и обратный вызов onreadystatechange вызываются, когда this === Comment
. Итак, xhr.onreadystatechange не работает.
xhr.onreadystatechange = function() {
if(xhr.readyState === XMLHttpRequest.DONE){
console.log('POST request sent, comment posted.')
}
Я думаю, что приведенная ниже ссылка будет вам полезна. Это проблема не из-за реакции, а из-за функции стрелки.
Эта ссылка более четко напишет об этой проблеме.
Справка
- Преобразование старого синтаксиса JavaScript в функцию стрелки