JavaScript
12
Вклад в тег
import React from 'react';
import classes from './Dialogs.module.css';
import DialogItem from "./DialogItem/DialogItem";
import Message from "./Message/Message";
import {Redirect} from "react-router-dom";
import {Field, Form, Formik} from 'formik';
const Dialogs = (props) => {
let state = props.dialogsPage;
let dialogsElements = state.dialogs
.map(el => <DialogItem name={el.name} key={el.id} id={el.id} avatar={el.avatar}/>);
let messagesElements = state.messages
.map(el => <Message message={el.message} key={el.id}/>);
if (!props.isAuth) return <Redirect to={"/login"}/>;
return (
<div className={classes.dialogs}>
<div className={classes.dialogsItems}>
{dialogsElements}
</div>
<div className={classes.messages}>
<div>{messagesElements}</div>
</div>
<AddMessageForm sendMessage={props.sendMessage}/>
</div>
)
}
const AddMessageForm = (props) => {
const initialValues = {
newMessageBody: ''
}
const onSubmit = values => {
props.sendMessage(values.newMessageBody);
console.log('запись', values)
}
return (
<Formik initialValues={initialValues} onSubmit={onSubmit}>
<Form>
<div>
<div>
<Field as='textarea'
id='newMessageBody'
name='newMessageBody'/>
</div>
<button type='submit'>Submit</button>
</div>
</Form>
</Formik>
)
}
export default Dialogs;<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<form id="form">
<input type="text" id="name"/>
<input type="text" id="image"/>
<input type="submit" id="add" />
</form>
</body>
</html>window.onload = function() {
let form = document.querySelector("#form");
let addElem = (text, src) => {
let div = document.createElement("div");
let h2 = document.createElement("h2");
let img = document.createElement("img");
img.src = src;
div.append(img);
h2.textContent = text;
div.append(h2);
return div;
}
form.onsubmit = () => {
let name = document.querySelector("#name");
let image = document.querySelector("#image");
document.body.append(addElem(name.value, image.value));
return false;
}
}