90 lines
2.3 KiB
TypeScript
90 lines
2.3 KiB
TypeScript
import React from 'react';
|
|
import { observable, action, makeObservable } from 'mobx';
|
|
import { PropTypes } from 'mobx-react';
|
|
import { Layout } from './shared/Layout';
|
|
import 'bootstrap/dist/css/bootstrap.min.css';
|
|
|
|
interface ToDoListItem {
|
|
todo: string,
|
|
checked: boolean,
|
|
}
|
|
|
|
interface ToDoState {
|
|
inputText: string,
|
|
toDoList: ToDoListItem[],
|
|
}
|
|
|
|
const TodoItem: React.FunctionComponent<{
|
|
item: ToDoListItem,
|
|
onRemoveButtonClick: (id) => void
|
|
}> = ({ item, onRemoveButtonClick }) => {
|
|
let onClick = () => {
|
|
onRemoveButtonClick(item);
|
|
}
|
|
return (
|
|
<div>
|
|
<button onClick={onClick}>Remove</button>
|
|
{item.todo}
|
|
</div>
|
|
);
|
|
}
|
|
const TodoList: React.FunctionComponent<{
|
|
items: ToDoListItem[],
|
|
onChange?: (item) => void
|
|
}> = ({ items, onChange }) => {
|
|
const onRemoveButtonClick = (item) => {
|
|
if(onChange) {
|
|
onChange(item);
|
|
}
|
|
}
|
|
const listItems = items.map(Q => <TodoItem onRemoveButtonClick={onRemoveButtonClick} item={Q}></TodoItem>)
|
|
return <div>{listItems}</div>;
|
|
}
|
|
|
|
|
|
class Todo extends React.Component<{},ToDoState> {
|
|
constructor(props) {
|
|
super(props);
|
|
this.state = {
|
|
inputText: "",
|
|
toDoList: [],
|
|
};
|
|
}
|
|
onTextInput = (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
this.setState({
|
|
inputText: e.target.value,
|
|
})
|
|
};
|
|
onChange = (item) => {
|
|
this.setState(
|
|
{
|
|
toDoList: this.state.toDoList.filter(x => item.todo != x.todo)
|
|
}
|
|
)
|
|
};
|
|
addList = () => {
|
|
this.setState({
|
|
inputText: "",
|
|
toDoList: [...this.state.toDoList, {
|
|
todo: this.state.inputText, checked: false
|
|
}],
|
|
})
|
|
}
|
|
render() {
|
|
return (
|
|
<div>
|
|
|
|
<div>
|
|
<input value={this.state.inputText} onChange={this.onTextInput}></input>
|
|
{this.state.inputText}
|
|
</div>
|
|
<button onClick={this.addList}>Add</button>
|
|
<TodoList onChange={this.onChange} items={this.state.toDoList}></TodoList>
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default () => {
|
|
return <Layout title="Todo"><Todo></Todo></Layout>
|
|
} |