代码之家 › 专栏 › 技术社区 › Sam

通过es6脚本创建web表单

jsx ecmascript-6 web reactjs javascript

Sam · 技术社区 · 6 年前

这是一个简单的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>

.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;
}

1 回复 | 直到 6 年前

Half 6 年前

@戈兰,你说得对应该制作一个单独的文件并将其透明,但是到。基于您正在添加 <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>