Я пытаюсь использовать веб-страницу 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;
}