Javascript 通过es6脚本创建web表单
我正在尝试使用es6网页创建一个网页，上面只有一个电子邮件表单。该表单有3个字段名称、电子邮件、主题、用于键入消息的文本框和用于发送消息的按钮。该按钮链接到发送电子邮件的php脚本我可能会更改此设置，以便javascript使用react发送电子邮件，但我移动缓慢，已经有了php 这是一个简单的html文件，可以做同样的事情。因此，预期的输出应该类似于此文件的输出Javascript 通过es6脚本创建web表单,javascript,reactjs,web,ecmascript-6,jsx,Javascript,Reactjs,Web,Ecmascript 6,Jsx,我正在尝试使用es6网页创建一个网页，上面只有一个电子邮件表单。该表单有3个字段名称、电子邮件、主题、用于键入消息的文本框和用于发送消息的按钮。该按钮链接到发送电子邮件的php脚本我可能会更改此设置，以便javascript使用react发送电子邮件，但我移动缓慢，已经有了php 这是一个简单的html文件，可以做同样的事情。因此，预期的输出应该类似于此文件的输出 <!DOCTYPE html> <html> <head> <meta cha
<!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>
@正确的做法是，您应该创建一个单独的文件并对其进行传输，但您不必这样做。基于您正在为babel添加标签的事实，我认为您的意思是在网页上传输脚本。只需将type=text/babel添加到脚本标记中 代码中还有一个小错误，即样式必须传递给对象而不是字符串，enctype应该是enctype。以下是您的整个脚本标记，其中包含以下更改： var Wrapper=props=>{ 回来 邮寄 } 变量字段=道具=>{ 回来 } Field.defaultProps={type:'text'} ReactDOM.render , document.getElementById'emailForm'
JSX代码必须使用babel进行传输才能工作，当您以这种方式将其包含在html文件中时，这是不可能的，我认为至少是不可能的。您应该将其提取到单独的文件中，并添加babel等。为什么样式必须传递给对象？这能被普遍化为什么。只是样式在jsx中总是必须传递一个对象吗？@Jacob Styles总是必须是一个对象，根据。我不知道他们为什么决定这样做——文档中说了一些关于防止跨站点脚本的模糊内容。
<!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;
}