Commit ce71ffc4 authored by Jiawen Lyu's avatar Jiawen Lyu

submit new login

parent 5d37e818
......@@ -38,15 +38,14 @@ class App extends Component {
this.addMessage(message);
};
addLogin = (e) => {
addLogin = (login) => {
this.setState({
logins: [...this.state.logins, e.target.value]
logins: [...this.state.logins, login]
})
}
render() {
const { currentTimeFormatState, messages } = this.state;
const { currentTimeFormatState, messages, logins } = this.state;
return (
<div>
<header>nihao</header>
......@@ -56,6 +55,7 @@ class App extends Component {
<SchedulerWithData
timeFormatState={currentTimeFormatState}
onDataUpdated={this.logDataUpdate}
id="schedule"
/>
</div>
<MessageArea messages={messages} />
......@@ -65,9 +65,8 @@ class App extends Component {
<div class="row">
<div class="col">
<LoginInput
handleClick={this.addLogin}
handleClick={(this.addLogin)}
/>
</div>
</div>
<div class="row" />
......@@ -75,7 +74,8 @@ class App extends Component {
<label for="exampleInputEmail1">Current students:</label>
</div>
<div class="row">
<StudentsList />
{logins}
<StudentsList logins={logins} />
</div>
</div>
......
......@@ -6,6 +6,7 @@ import React from 'react';
export const LoginInput = (props) => {
let inputValue;
return (
<>
<form>
......@@ -14,13 +15,21 @@ export const LoginInput = (props) => {
</div>
<div class="row">
<div class="col">
<input class="form-control" id="exampleInputEmail1" />
<input
class="form-control"
ref={input => inputValue = input}
id="exampleInputEmail1"
/>
</div>
<div class="col">
<button
type="submit"
class="btn btn-primary btn-sm"
onClick={props.handleClick}
onClick={(e) => {
e.preventDefault();
props.handleClick(inputValue.value)
}
}
>
Submit
</button>
......
......@@ -93,6 +93,7 @@ export default class Scheduler extends Component {
<div
ref={(input) => { this.schedulerContainer = input }}
style={{ width: '100%', height: '100%' }}
></div>
);
}
......
import React from 'react';
export const StudentsList = (props) => {
return (
<>
<ul class="list-group">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
</>
const { logins } = props
if (logins)
return (
<>
<ul class="list-group" id="studentList">
<li class="list-group-item">
{
console.log(logins)
}
</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
</>
)
else return (
<ul class="list-group">
<li class="list-group-item">null</li>
</ul>
)
}
\ No newline at end of file
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