Form + events

parent 7117c4ac
......@@ -2,6 +2,7 @@ import React, { Component } from "react";
import "./ChatRoom.css";
import Message from "./Message";
import ChatRoomHeader from "./ChatRoomHeader";
import ChatRoomInput from "./ChatRoomInput";
const SERVER = "http://localhost:3004";
......@@ -40,7 +41,8 @@ class ChatRoom extends Component {
return (
<div className="ChatRoom">
<ChatRoomHeader />
<ChatRoomHeader body={this.props}/>
<ChatRoomInput />
<div>{messageList}</div>
</div>
);
......
import React, { Component } from "react";
import "./ChatRoomHeader.css";
function getDate() {
let d = new Date();
return d.toLocaleString("es-ES");
}
const SERVER = "http://localhost:3004";
class ChatRoomInput extends Component {
constructor(props) {
super(props);
this.state = { value: "" };
}
handleChange = event => {
this.setState({ value: event.target.value });
};
handleSubmit = event => {
fetch(`${SERVER}/messages`, {
method: "post",
headers: {
"Content-Type": "application/json" // <--- don't forget this!
},
body: JSON.stringify({
author: 456326,
body: this.state.value,
date: ""
})
})
.then(res => res.json())
.then(res => console.log("Resp:", res))
.catch(e => console.error(e));
event.preventDefault();
};
render() {
return (
<form onSubmit={this.handleSubmit}>
<div className="Avatar">
<img src="avatars/456326.png" alt="Avatar" /> Darth Maul
</div>
<label>
<input
type="text"
value={this.state.message}
onChange={this.handleChange}
/>
</label>
<button>Submit</button>
</form>
);
}
}
export default ChatRoomInput;
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment