https://github.com/lfb/react-todolist
A react todolist example
https://github.com/lfb/react-todolist
Last synced: 2 months ago
JSON representation
A react todolist example
- Host: GitHub
- URL: https://github.com/lfb/react-todolist
- Owner: lfb
- License: mit
- Created: 2020-03-25T08:17:49.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-05T17:04:18.000Z (over 3 years ago)
- Last Synced: 2025-01-01T09:09:22.728Z (over 1 year ago)
- Language: JavaScript
- Size: 3.88 MB
- Stars: 2
- Watchers: 3
- Forks: 0
- Open Issues: 20
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-todolist
A react todolist example
## 继承 react 组件
```js
import React, {Component} from 'react'
class TodoList extends Component {
// ...
}
```
## 绑定 this
```js
class TodoList extends Component {
constructor(props) {
super(props)
this.changeVal = this.changeVal.bind(this)
this.addItem = this.addItem.bind(this)
this.removeItem = this.removeItem.bind(this)
}
// ...
}
```
## 定义组件的数据 state
```js
class TodoList extends Component {
constructor(props) {
super(props)
this.state = {
val: '',
list: [],
}
}
// ..
}
```
修改state，通过 setState 方法修改：
```js
/**
* 新增项
*/
addItem() {
if (this.state.val !== '') {
this.setState({
list: [...this.state.list, {
title: this.state.val
}],
val: ''
})
}
}
/**
* 移除项
* @param index
*/
removeItem(index) {
const list = [...this.state.list]
list.splice(index, 1)
this.setState({
list
})
}
```
## 绑定样式和事件
```html
新增
```
## 父子通信
- 父组件在子组件上通过属性的方法传递属性或者方法
- 子组件通过 props 的方法接收属性和方法
```js
```
```js
class TodoItem extends Component {
remove() {
const {remove, index} = this.props
remove(index)
}
render() {
return (
{this.props.item.title}
删除
)
}
}
export default TodoItem
```