react学习笔记 todo-end

jiang6821865

todo-2

todo-1，实现了大体的效果，这次优化一下

• 优化样式

很简单，用了boostrap的样式，再写点自己的样式

---

功能优化

主要就是新增todo和删除

---

下面就是新增相关的

• 新增不能是空的判断
• mock的数据是数组，push进一个新的json
• 把textarea绑定的值，赋空，就是把textarea的内容去掉，不显示
• 把最新的值，传递给传给父组件的函数

  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里面的一行，拿出来，要复用

  output(mock) {
  this.props.onChange(mock);
  }

  绑定点击事件

  <input
  type="button"
  className="btn btn-group btn-primary float-right"
  value={'确定'}
  onClick={this.submit.bind(this)}
  />

  ---

  下面是删除相关的
  mock里添加checkbox是否选中的数据

  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函数

  handleInputChange(i) {
  this.props.mock[i].checked = !this.props.mock[i].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的，返回，然后传递到父组件，很简单

  delete() {
    const mock = this.props.mock.filter(value => {
      if (!value.checked) {
        return value;
      }
    });
    this.output(mock);
  }

todo就告一段落了，好像也没人看，以后有时间再看吧，也许会更新写后台管理系统

代码在github上，有提交记录 https://github.com/jiangxd2016/react-todo

shao123

好巧，我也正在学习

jiang6821865

aiyan 发表于 2018-6-25 06:22
win10的好像没反应      Windows 10 Version 1709

我这边都测试过了的，你是怎么做的，截图我看看