[笔记]react学习之todo-1
本帖最后由 wushaominkk 于 2018-6-9 21:18 编辑# todo-1
> sass 安装好了，暂时不用，今天先实现 todo 的功能，很简单，就是显示 todo 的列表，可以添加一个 todo
> 先删除无用的代码，把 src 目录下的无用文件删除掉，具体可看(https://github.com/jiangxd2016/react-todo)
- 在 src 的目录下，创建 2 个文件夹，一个是 list，就是 todo 的列表，一个是 add，就是添加的。以后文件操作都在 src 目录下
- 模拟数据，新建 mock.js，内容如下
```javascript
const mock = [
{ content: '吃饭', time: '1528436867000' },
{ content: '睡觉', time: '1528436867000' },
{ content: '打豆豆', time: '1528436867000' },
];
export default mock;
```
- 修改 app.js ，导入 list，add，和 mock
```javascript
import Mock from './mock';
import List from './list/list';
import Add from './add/add';
```
- 编写列表的展示
> 重要的就是 2 处，循环代码和输出，用 map（es6 的循环）遍历数据，生成 li 标签，render 渲染代码，
```javascript
this.mock.map((value, i) => (
<li key={i}>
<input type="checkbox" />
{value.content}
<span>{this.dateFormatter(value.time)}</span>
</li>
));
```
```javascript
render() {
return <ul>{this.listMap()}</ul>;
}
```
- 添加的方法，就得和父组件通信，通过 props 拿到父组件的方法，把值传进入，父组件直接改变 mock 的值，就可以直接改变 list 列表的值
> bind(this)，就是绑定当前 this，也就是这个 class 内容，不然会丢失 this
> 定义了一个 textValue，当 textarea，有变化的时候，改变 textValue 的值
> 当点击确定的时候，把传入的数组（mock）,添加一个 json，并调用父组件传递过来的函数，把值传进入
```javascript
export default class add extends Component {
constructor(props) {
super(props);
this.textValue = '';
}
submit() {
this.props.mock.push({ content: this.textValue, time: new Date().getTime() });
this.props.onChange(this.props.mock);
}
change(event) {
this.textValue = event.target.value;
}
render() {
return (
<div>
<textarea value={this.props.textValue} onChange={this.change.bind(this)} />
<input type="button" value={'确定'} onClick={this.submit.bind(this)} />
</div>
);
}
}
```
- 最后父组件，也就是 app.js，拿到数据，用 setState，更新数据，list 也就接收到数据，更新了列表
> onChange={this.onChange.bind(this)},这个就是父组件传递过去的方法
```javascript
onChange(mock) {
this.setState(mock);
}
render() {
return (
<div className="App">
<List mock={this.state.Mock} />
<Add mock={this.state.Mock} onChange={this.onChange.bind(this)} />
</div>
);
}
```
#### 到此，一个 todo 的功能就实现了，当然，这还不够，还有很多问题，优化的地方特别多，显而易见的就是样式优化，但是其他的地方，还有什么要优化的，大家可以尝试下，下次就是优化的更新。github 地址在上面，大家可以下载，npm run start 启动项目，看一下
### 最后，前端的学习，任重道远，谁都不是生下来就会的，如果你看到了现在，希望不会的，可以去查，去百度。当然，我也是初学 react，如有不对的，希望大家指出。 {:17_1063:}沙发第一次啊~
页:
[1]