Как подружить jQuery и React. PHP (Обратная связь)?

Question

[Денис Соколов]

import React from 'react'
import $ from 'jquery'

$('#sendMail').on('click', function () {
  let name = $('#name').val().trim();
  let face = $('#face').val().trim();
  let personal_account = $('#personal_account').val().trim();
  let addres = $('#addres').val().trim();
  let email = $('#email').val().trim();
  let phone = $('#phone').val().trim();
  let text = $('#text').val().trim();
  let image = $('#image').val();

  $.ajax({
    url: 'mail.php',
    type: 'POST',
    cache: false,
    data: {
      "name": name,
      "face": face,
      "personal_account": personal_account,
      "addres": addres,
      "email": email,
      "phone": phone,
      "text": text,
      "image": image
    },
    dataType: 'html',
    beforeSend: function () {
      $('#sendMail').prop('disabled', true);
    },
    success: function() {
      $('#sendMail').prop('disabled', false);
      alert("Успешно отправили заявку")
    }
  });
});

export const FeedbackForm = () => {
  return (
    <form id="form" method="post" action="mail.php">
      <div className="feedback-form">
        <div className="feedback-form__name">
          <div className="feedback-form__title">Наименование организации / ФИО.*</div>
          <input type="text" name="name" id="name" placeholder="Наименование организации / ФИО.*" className="form-input"
            required />
        </div>
        <div className="feedback-form__face">
          <div className="feedback-form__title">Контактное лицо</div>
          <input type="text" name="face" id="face" placeholder="Контактное лицо" className="form-input" />
        </div>
        <div className="feedback-form__personal-account">
          <div className="feedback-form__title">Лицевой счет*</div>
          <input type="text" name="personal_account" id="personal_account" placeholder="Лицевой счет*"
            className="form-input" required />
        </div>
        <div className="feedback-form__addres">
          <div className="feedback-form__title">Адрес*</div>
          <input type="text" name="addres" id="addres" placeholder="Адрес*" className="form-input" required/>
        </div>
        <div className="feedback-form__email">
          <div className="feedback-form__title">E-mail*</div>
          <input type="email" name="email" id="email" placeholder="E-mail*" className="form-input" required />
        </div>
        <div className="feedback-form__phone">
          <div className="feedback-form__title">Контактный телефон*</div>
          <input type="text" name="phone" id="phone" placeholder="Контактный телефон*" className="form-input" id="phone"
          required />
        </div>
        <div className="feedback-form__text">
          <div className="feedback-form__title">Текст сообщения*</div>
          <textarea type="text" name="text" id="text" placeholder="Текст сообщения*" className="form-input text"
            required></textarea>
        </div>
        <div className="feedback-form__fail">
          <div className="feedback-form__title file">Прикрепить к приложению файл</div>
          <input type="file" name="image" id="image" className="inputfile" />
        </div>
      </div>
      <button type="button" className="send" id="sendMail">Отправить сообщение</button>
    </form>
  )
}

<!--  -->
  // $name = $_POST['name'];
  // $face = $_POST['face'];
  // $personal_account = $_POST['personal_account'];
  // $addres = $_POST['addres'];
  // $email = $_POST['email'];
  // $phone = $_POST['phone'];
  // $text = $_POST['text'];

  // $subject = "=?utf-8?B?".base64_encode("Сообщение с сайта")."?=";
  // $headers = "From: $email\r\nReply-to: $email"

  // $success = mail("[e-mail]", $subject. $text, $headers);

  // echo $success;
//

<?php
  $name = $_POST['name'];
  $face = $_POST['face'];
  $personal_account = $_POST['personal_account'];
  $addres = $_POST['addres'];
  $email = $_POST['email'];
  $phone = $_POST['phone'];
  $text = $_POST['text'];
  $image = $_POST['image'];

  $name = htmlspecialchars($name);
  $face = htmlspecialchars($face);
  $personal_account = htmlspecialchars($personal_account);
  $addres = htmlspecialchars($addres);
  $email = htmlspecialchars($email);
  $phone = htmlspecialchars($phone);
  $text = htmlspecialchars($text);
  $image = htmlspecialchars($image);

  $name = urldecode($name);
  $face = urldecode($face);
  $personal_account = urldecode($personal_account);
  $addres = urldecode($addres);
  $email = urldecode($email);
  $phone = urldecode($phone);
  $text = urldecode($text);
  $image = urldecode($image);

  mail("[e-mail]","Заявка с сайта", 
  "Наименование организации / ФИО.*: $name\n
  Контактное лицо: $face\n
  Лицевой счет*: $personal_account\n
  Адрес*: $addres\n
  E-mail*: $email\n
  Контактный телефон*: $phone\n
  Текст сообщения*: $text\n
  Изображение: $image");
  if (mail == TRUE) {
      echo "Заявка отправлена.";
  } else {
      echo "Ошибка отправки.";
  }
?>

Comments

[Арслан Исаев]

Зачем вам jQuery если у вас react?

[MagnusDidNotBetray]

Арслан Исаев, видимо в гугле не нашлось кода на реакте, который можно было бы скопипастить.

Answer 1

[G F]

Без ангуляра и питона никак скорее всего :(

Answer 2

[Анатолий Куликов]

Для реакта использовать jquery это как-то слишком. Мне кажется, что эти библиотеки взаимоисключающие.

Здесь легче сделать классовый компонент и в стейт записывать изменения всех ваших полей, а затем с помощью обычного fetch отправить запрос на бекенд (к php).

А если хотите функциональные компоненты, то используйте хук useState.