react todolist 3

父组件TodoList.js

分成了三个子组件

TodoHeader,TodoInput,List

import React, { Component } from ‘react’;

import{TodoInput,TodoHeader,List} from ‘./index.js’

class TodoList extends Component {

constructor(){

super()

this.state={

title2:“今日事今日毕”,

todos:[{

id:1,

title:“吃饭”,

isComleted:true

},

{

id:2,

title:“学习”,

isComleted:true

},

{

id:3,

title:“睡觉”,

isComleted:false

},

]

}

}

render() {

return (

{this.state.title2}

);

}

addTodo=(todoTitle)=>{

console.log(‘子元素传值’,todoTitle)

//注意不能用push这样写，因为push返回的是数组的长度

// this.setState({

// todos:this.state.todos.concat({

// id:Math.random(),

// title:todoTitle,

// isComleted:false

// })

// })

//用push这样写

// const newTodos = […this.state.todos]

// newTodos.push({

// id:Math.random(),

// title:todoTitle,

// isComleted:false

// })

// this.setState({

// todos:newTodos

// })

//第三种新值添加进数组的方法

const newlist = {

id:Math.random(),

title:todoTitle,

isComleted:false

}

this.setState({

todos:[…this.state.todos,newlist]

})

}

//点击checkbox取反

onisComletedChange=(id)=>{

console.log(id)

const data = this.state.todos.map(item=>{

if(item.id===id){

item.isComleted=!item.isComleted

}

return item

})

this.setState({

todos:data

})

}

}

export default TodoList

TodoHeader.js

import React, { Component } from ‘react’;

export default class TodoHeader extends Component {

render() {

console.log(this.props) //{title: “待办事项”, children: “今日事今日毕”}

return (

{this.props.title}

{this.props.children}

);

}

}

TodoInput.js

import React, { Component,createRef } from ‘react’;

export default class TodoInput extends Component {

constructor(){

super()

this.state={

inputValue:‘’

}

this.handleAdd = this.handleAdd.bind(this)

this.handleKeyUp = this.handleKeyUp.bind(this)

//定义createRef

this.inputDom = createRef()

}

render() {

return (

<input type=“text”

value={this.state.inputValue}

onChange={this.handleInput.bind(this)}

onKeyUp={this.handleKeyUp}

结尾

学习html5、css、javascript这些基础知识，学习的渠道很多，就不多说了，例如，一些其他的优秀博客。但是本人觉得看书也很必要，可以节省很多时间，常见的javascript的书，例如：javascript的高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。

高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。