You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
71 lines
1.8 KiB
71 lines
1.8 KiB
import { addTodo, removeTodo } from "@/store/action/todo"
|
|
import React, { FormEvent, useRef, useContext } from "react"
|
|
import { connect } from "react-redux"
|
|
import Header from "./Header"
|
|
|
|
export interface HomeProps {
|
|
add(text: string): void
|
|
todo: ITodo[]
|
|
remove(id: number): void
|
|
}
|
|
|
|
function Home(props: HomeProps) {
|
|
const { todo, add, remove } = props
|
|
const inputRef = useRef<HTMLInputElement>(null)
|
|
|
|
function addOne(e: FormEvent) {
|
|
e.preventDefault()
|
|
let text = inputRef.current!.value
|
|
if (text) {
|
|
inputRef.current!.value = ""
|
|
add(text)
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div>
|
|
<Header></Header>
|
|
<div>
|
|
<div className="bg-white min-h-100vh">
|
|
<div className="container clearfix mx-auto h-500px">
|
|
<form onSubmit={e => addOne(e)}>
|
|
<input ref={inputRef} type="text" />
|
|
<button type="submit">添加</button>
|
|
</form>
|
|
{todo.map((v: ITodo) => {
|
|
return (
|
|
<p onClick={() => remove(v.id)} key={v.id}>
|
|
{v.text}
|
|
{v.id}
|
|
</p>
|
|
)
|
|
})}
|
|
</div>
|
|
</div>
|
|
<div className="min-h-100vh"></div>
|
|
<div className="bg-white min-h-100vh">
|
|
<div className="container clearfix mx-auto">
|
|
{[...Array(100)]
|
|
.map((v, i) => i)
|
|
.map(v => {
|
|
return <p key={v}>v</p>
|
|
})}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
const mapStateToProps = (state: any) => {
|
|
return {
|
|
todo: state.todo,
|
|
}
|
|
}
|
|
|
|
const mapDispatchToProps = (dispatch: any) => ({
|
|
add: (text: string) => dispatch(addTodo(text)),
|
|
remove: (id: string | number) => dispatch(removeTodo(id)),
|
|
})
|
|
|
|
export default connect(mapStateToProps, mapDispatchToProps)(Home)
|
|
|