我正在尝试使用 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;
}
最佳答案
@Goran.it 是正确的，您应该创建一个单独的文件并对其进行转译，但您没有这样做。基于您要添加 <script> 的事实babel 的标签，我认为你的意思是在网页上转译脚本。只需添加 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>
关于javascript - 通过 es6 脚本创建 Web 表单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55075436/