Создание веб-формы с помощью скрипта es6

Я пытаюсь использовать веб-страницу es6 для создания веб-страницы только с формой электронной почты. Форма имеет 3 поля (имя, адрес электронной почты, тема), текстовое поле для ввода сообщения и кнопку для отправки сообщения. Кнопка ссылается на php-скрипт, который отправляет электронное письмо (я могу изменить это, чтобы javascript отправлял электронное письмо с реакцией, но я двигаюсь медленно и уже имел php)

Это обычный html-файл, который будет делать то же самое. Таким образом, ожидаемый результат должен выглядеть как вывод из этого файла.

<!DOCTYPE html>
<html>
  <head>
    <meta charset = "UTF-8" />
    <title>React tutorial</title>
    <script src = "https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src = "https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src = "https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.2/browser.min.js"></script>
    <link rel = "stylesheet" type = "text/css" href = "temp.css">
  </head>
  <body>
      <div class = "form_style form_class" data-state = "desktop left" data-dcf-columns = "4">
        <form action = "/php/email_me.php" method = "post" role = "form" aria-label = "contact form" enctype = "multipart/form-data">
          <div>
            <input id = "field1" aria-invalid = "false" name = "Name" value = "" placeholder = "Name" data-aid = "nameField" type = "text">
            <input id = "field2" aria-invalid = "false" name = "Email" value = "" placeholder = "Email" data-aid = "emailField" type = "text">
            <input id = "field3" aria-invalid = "false" name = "Subject" value = "" placeholder = "Subject" data-aid = "subjectField" type = "text">
          </div>
          <textarea name = "Message" placeholder = "Message" data-aid = "messageField" ></textarea>
          <button style = "background-color:#014391" type = "submit" name = "submit" value = "Send">Send</button>                           
        </form>
      </div>
  </body>
</html>

А это соответствующий HTML со встроенным jsx

<!DOCTYPE html>
<html>
  <head>
    <meta charset = "UTF-8" />
    <title>React tutorial</title>
    <script src = "https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src = "https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src = "https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.2/browser.min.js"></script>
    <link rel = "stylesheet" type = "text/css" href = "temp.css">
  </head>
  <body>
      <div id='emailForm' class = "form_style form_class" data-state = "desktop left" data-dcf-columns = "4"></div>
      <script>
        var Wrapper = (props) => {
          return (
            <div className = "form_style form_class" data-state = "desktop left" data-dcf-columns = "4">
                <form action = "/php/email_me.php" method = "post" role = "form" aria-label = "contact form" enctype = "multipart/form-data">
                    <div>
                        <Field id='field1' name='Name' dataAid='nameField'  />
                  <Field id='field2' name='Email' dataAid='emailField'  />
                  <Field id='field3' name='Subject' dataAid='subjectField'  />
                    </div>
                  <textarea name = "Message" className = "message" placeholder = "Message" data-aid = "messageField"></textarea>
                  <button style = "background-color:#014391" type = "submit" name = "submit" value = "Send">Send</button>                           
                </form>
            </div>
            )
          }

          var Field = (props) => {
            return (
            <input id = {props.id} aria-invalid = "false" name = {props.name} value = "" placeholder = {props.name} data-aid = {props.dataAid} type = {props.type}></input>
            )
          }
          Field.defaultProps = { type: 'text'}

          ReactDOM.render(
            <Wrapper />,
            document.getElementById('emailForm')
          )
      </script>
  </body>
</html>

temp.css

.form_class {
    top: 20px;
    width: 780px;
    position: relative;
    height: 316px;
    margin: auto;
}

.form_style input,.form_style textarea {
    font:normal normal normal 16px/1.875em raleway,sans-serif ;
    background-color:transparent;
    -webkit-appearance:none;
    -moz-appearance:none;border:1px solid rgba(11, 50, 89, 1);
    color:#0B3259;
    margin:0 0 5px;
    width:100%;
}

/* Send button */
.form_style button {
    background-color:rgba(11, 50, 89, 1);
    color:#FFFFFF;
    cursor:pointer;
    float:right;
}

Код JSX должен быть транспилирован с помощью babel, чтобы он работал, когда вы включаете его таким образом в html-файл, что невозможно (я думаю, по крайней мере, это не так). Вы должны извлечь это в отдельный файл и добавить babel и т. д.

— 09.03.2019 09:38

javascript reactjs web ecmascript-6 jsx

09.03.2019 09:30

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

413

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

@Goran. Было правильно, что вы должен создаете отдельный файл и транспилируете его, но вы не делаете этого имеют. Основываясь на том факте, что вы добавляете тег <script> для babel, я думаю, вы хотели перенести скрипт на веб-страницу. Просто добавьте type = "text/babel" к тегу скрипта.

В вашем коде были и другие мелкие ошибки, а именно то, что style должен быть передан объект, а не строка, а enctype должен быть encType. Вот весь ваш тег script с этими изменениями:

<script type = "text/babel">
  var Wrapper = (props) => {
    return (
      <div className = "form_style form_class" data-state = "desktop left" data-dcf-columns = "4">
        <form action = "/php/email_me.php" method = "post" role = "form" aria-label = "contact form" encType = "multipart/form-data">
            <div>
              <Field id='field1' name='Name' dataAid='nameField'  />
              <Field id='field2' name='Email' dataAid='emailField'  />
              <Field id='field3' name='Subject' dataAid='subjectField'  />
            </div>
          <textarea name = "Message" className = "message" placeholder = "Message" data-aid = "messageField"></textarea>
          <button style = {{backgroundColor: "#014391"}} type = "submit" name = "submit" value = "Send">Send</button>                           
        </form>
      </div>
    )
  }

  var Field = (props) => {
    return (
      <input id = {props.id} aria-invalid = "false" name = {props.name} value = "" placeholder = {props.name} data-aid = {props.dataAid} type = {props.type}></input>
    )
  }
  Field.defaultProps = { type: 'text' }

  ReactDOM.render(
    <Wrapper />,
    document.getElementById('emailForm')
  )
</script>

Почему стиль должен передаваться как объект? К чему это можно универсализировать. Просто стиль всегда должен передаваться объекту в jsx?

— 13.03.2019 10:44

@Jacob Стили всегда должны быть объектом, согласно документация. Я не уверен, почему они так решили — в документации сказано что-то расплывчатое о предотвращении межсайтового скриптинга.

— 13.03.2019 18:44

09.03.2019 09:44