react学习笔记 todo-end
本帖最后由 jiang6821865 于 2018-6-9 15:35 编辑# todo-2
>todo-1，实现了大体的效果，这次优化一下
- 优化样式
很简单，用了boostrap的样式，再写点自己的样式
---
### 功能优化
主要就是新增todo和删除
----
> 下面就是新增相关的
- 新增不能是空的判断
- mock的数据是数组，push进一个新的json
- 把textarea绑定的值，赋空，就是把textarea的内容去掉，不显示
- 把最新的值，传递给传给父组件的函数
~~~ javascript
submit() {
if (this.textValue === '') {
alert('请输入内容!');
return false;
}
this.props.mock.push({
content: this.state.textValue,
time: new Date().getTime() + '',
checked: false,
});
this.setState({
textValue: '',
});
this.output(this.props.mock);
}
~~~
> 就是之前放在submit里面的一行，拿出来，要复用
~~~ javascript
output(mock) {
this.props.onChange(mock);
}
~~~
> 绑定点击事件
~~~ javascript
<input
type="button"
className="btn btn-group btn-primary float-right"
value={'确定'}
onClick={this.submit.bind(this)}
/>
~~~
----
下面是删除相关的
> mock里添加checkbox是否选中的数据
~~~ javascript
const mock = [
{ content: '吃饭', time: '1528436867000', checked: false },
{ content: '睡觉', time: '1528436867000', checked: false },
{ content: '打豆豆', time: '1528436867000', checked: true },
];
export default mock;
~~~
> 列表渲染，放入是否选中，和change改变mock的值
- handleInputChange函数就是把当前的数组中，选中的(I)的，checked取反，并调用父组件的方法，传递出去
- 渲染绑定checked 的值，和绑定change函数
~~~ javascript
handleInputChange(i) {
this.props.mock.checked = !this.props.mock.checked;
this.props.onChange(this.props.mock);
}
listMap() {
return this.props.mock.map((value, i) => (
<li key={i} className="list-group-item list-item">
<input
type="checkbox"
className="checkbox float-left"
checked={value.checked}
onChange={this.handleInputChange.bind(this, i)}
/>
<p className="float-left">{value.content}</p>
<span className="float-right">{this.dateFormatter(value.time)}</span>
</li>
));
}
~~~
> add里面的删除，就是遍历mock，筛选（数组的filter方法），出checked为false的，返回，然后传递到父组件，很简单
~~~ javascript
delete() {
const mock = this.props.mock.filter(value => {
if (!value.checked) {
return value;
}
});
this.output(mock);
}
~~~
### todo就告一段落了，好像也没人看，以后有时间再看吧，也许会更新写后台管理系统
# 代码在github上，有提交记录 https://github.com/jiangxd2016/react-todo 好巧，我也正在学习 aiyan 发表于 2018-6-25 06:22
win10的好像没反应 Windows 10 Version 1709
我这边都测试过了的，你是怎么做的，截图我看看
页:
[1]