父组件:
import React, {
Component } from "react"
import Header from "./components/Header"
import Footer from "./components/Footer"
import List from "./components/List"
export default class App extends Component {
state = {
todos: [
{
id: '001', msg: 'Sleep', done: true },
{
id: '002', msg: 'Eat', done: false },
{
id: '003', msg: 'Code', done: false }
] }
addTodo = (todoObj) => {
const {
todos} = this.state
const newTodos = [todoObj, ...todos]
this.setState({
todos: newTodos})
}
changeTodo = (id) => {
const {
todos} = this.state
const newTodos = todos.map(todo => {
if (todo.id === id) {
return {
...todo, done: !todo.done}
} else {
return {
...todo}
}
})
this.setState({
todos: newTodos})
}
render(){
const {
todos} = this.state
return(
<div className="todo-container">
<Header addTodo={
this.addTodo} />
<List todos={
todos} changeTodo={
this.changeTodo} />
<Footer />
</div>
)
}
}
父组件里面给子组件Header传递一个addTodo做为props,这个addTodo是一个函数:
子组件Header:
import React, {
Component } from 'react'
import PropTypes from 'prop-types'
import {
nanoid} from'nanoid'
import './index.css'
export default class Header extends Component {
static propTypes = {
addTodo: PropTypes.func.isRequired
}
handleKeyUp = (event) => {
const {
keyCode, target} = event
if (keyCode !== 13) return
if (target.value.trim() === '') {
alert('input is empty!')
target.value = ''
return
}
console.log(target.value, event.keyCode)
const todoIbj = {
id: nanoid(), msg: target.value, done: false}
this.props.addTodo(todoIbj)
target.value = ''
}
render() {
return (
<div className="todo-header">
<input onKeyUp={
this.handleKeyUp} type="text" placeholder="input task name, press enter to confirm" />
</div>
)
}
}
子组件Header如果想要限制props类型和必要性,可以这样:
1.安装prop-types库npm i prop-types
:
2. 在子组件中引用import PropTypes from 'prop-types'
, 注意,import后面的是PropTypes
,P和T都是大写的
3. 对接收的props进行类型和必要性的限制,注意static
关键字和它后面的propTypes
,这里的第一个p是小写的