Question

我正在尝试使用es6网页创建仅带有电子邮件表单的网页。该表单具有3个字段（名称，电子邮件，主题），用于键入消息的文本框和用于发送消息的按钮。该按钮链接到发送电子邮件的php脚本（我可能会对此进行更改，因此javascript会通过react发送电子邮件，但我的动作缓慢并且已经有了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>

这是带有嵌入式jsx的相应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 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;
}

Answer 1

@Goran。您应该制作一个单独的文件并进行编译是正确的，但是您没有必须。基于您正在为babel添加<script>标签的事实，我认为您打算在网页上转译脚本。只需在脚本标签中添加type="text/babel"。

您的代码中还有其他一些小错误，即style必须传递一个对象而不是字符串，并且enctype应该是encType。这是您的整个脚本标签，其中包含以下更改：

<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>

通过es6脚本创建Web表单

1 个答案: