Закрытие формы без перезагрузки страницы при отправке почтового запроса в бэкэнд API

Question

Вероятно, это простой, но у меня есть интерфейс React и серверная часть Express, и я отправляю данные в свой API через форму в интерфейсе.У меня есть две кнопки, одна Отправить и одна Закрыть.Кнопка Закрыть имеет обработчик события щелчка, который закрывает оверлей, не покидая страницу.Я бы хотел, чтобы кнопка «Отправить» работала так же, используя обработчик onSubmit.Однако, несмотря на то, что мои почтовые запросы проходят успешно, они никогда не закрывают оверлей, несмотря на использование той же функции.

Я могу заставить приложение работать, используя res.redirect на моей странице на домашней странице, но в идеале я бы хотел, чтобы страница не перезагружалась.Кроме того, когда мой внутренний сервер отправляет любые данные обратно с помощью res.send () или res.json (), он загружает данные JSON в мой браузер, а не обрабатывает их в моем внешнем интерфейсе (например, показывает все сообщения в моем браузере).Компонент posts.js).

Соответствующий код:

Постпуть

router.post('/', (req, res) => {

  Post.create(req.body)
    .then(newPost => {
        console.log("Success!")
        res.status(201).json(newPost);
        //res.redirect('http://localhost:3000');
    })
    .catch(err => {
      console.log(err);
      res.send(err);
    })
})

Функция наложения формы и закрытия

handleClose(e) {
    this.props.closeForm();
    e.preventDefault();
  }

  render() {
    const postForm =
    <div className="form-popup" id="newPost">
      <form action="http://localhost:5000/api/posts" method="post" className="form-container">

        <h1>New Blog Post</h1>
        <div className="formArea formtitle">
          <label htmlFor="title"><b>Title</b></label>
          <input type="text" placeholder="Blog Post Title" name="title" required />

        </div>
        <div className="formArea formlocation">
          <label htmlFor="location"><b>Location</b></label>
          <input type="text" placeholder="Location" name="location" required />
        </div>
        <div className="formArea postcontent">
          <textarea placeholder="Your post here" name="bodyText" required />
        </div>
        <div className="formArea formsubmit">
          <button type="submit" className="btn" onSubmit={this.handleClose} >Post</button>
          <button type="submit" className="btn cancel" onClick={this.handleClose}>Close</button>
        </div>

      </form>
    </div>

Answer 1

Ваша проблема не имеет ничего общего с Node.js.Прочитайте о контролируемых компонентах и axios .

Чтобы сделать это способом реагирования, измените свой код на следующее:

    import React from 'react';
    import axios from 'axios';

    class YourComponent extends React.Component {

        constructor(props) {
            super(props);
            this.state = {
                title: '',
                location: '',
                bodyText: ''
            };

            handleOnInputChange = (event)=> {
                const target = event.target;
                const value = target.type === 'checkbox' ? target.checked : target.value;
                const name = target.name;

                this.setState({
                  [name]: value
                });
            }

            handleSubmitForm = ()=> {
                const { title, location, bodyText } = this.state;

                axios.post('http://localhost:5000/api/posts', {
                    userName: name,
                    userLocation: location,
                    text: bodyText
                })
                .then(response=> {
                    //Do something with the response
                    console.log(response)
                })
                .catch(error=>{
                    //Do something with the error
                    console.log(error)
                })
            }
        }

        render(){
            <div className="form-popup" id="newPost">
             <form className="form-container">

               <h1>New Blog Post</h1>
               <div className="formArea formtitle">
                 <label htmlFor="title"><b>Title</b></label>
                 <input type="text" placeholder="Blog Post Title" name="title" required value={this.state.title} onChange={event => this.handleOnInputChange(event)} />

               </div>
               <div className="formArea formlocation">
                 <label htmlFor="location"><b>Location</b></label>
                 <input type="text" placeholder="Location" name="location" required value={this.state.location} onChange={event => this.handleOnInputChange(event} />
               </div>
               <div className="formArea postcontent">
                 <textarea placeholder="Your post here" name="bodyText" required onChange={event => this.handleOnInputChange(event}>{this.state.bodyText}</textarea>
               </div>
               <div className="formArea formsubmit">
                 <button type="button" className="btn" onSubmit={this.handleSubmitForm} >Post</button>
                 <button type="button" className="btn cancel" onClick={this.handleClose}>Close</button>
               </div>

             </form>
           </div>
        }
    }
    export default YourComponent

Answer 2

Два варианта

• Рекомендовано: Отправьте запрос с помощью JavaScript, используя Ajax вызов
• Хакерское решение : вставьте тег iframe на свою страницу и укажите в качестве цели form

XHR

var xhr = new XMLHttpRequest();
xhr.open("POST", '/server', true);

//Send the proper header information along with the request
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

xhr.onreadystatechange = function() { // Call a function when the state changes.
    if (this.readyState === XMLHttpRequest.DONE && this.status === 200) {
        // Request finished. Do processing here.
    }
}
xhr.send("foo=bar&lorem=ipsum");

iframe

<iframe name="formTarget" style="display:none;"></iframe>
<form action="http://localhost:5000/api/posts" method="post" target="formTarget">
    <!--Your inputs and other form contents-->        
</form>