[笔记]react学习之todo-1

jiang6821865

todo-1

sass 安装好了，暂时不用，今天先实现 todo 的功能，很简单，就是显示 todo 的列表，可以添加一个 todo

先删除无用的代码，把 src 目录下的无用文件删除掉，具体可看github

• 在 src 的目录下，创建 2 个文件夹，一个是 list，就是 todo 的列表，一个是 add，就是添加的。以后文件操作都在 src 目录下
• 模拟数据，新建 mock.js，内容如下

const mock = [
  { content: '吃饭', time: '1528436867000' },
  { content: '睡觉', time: '1528436867000' },
  { content: '打豆豆', time: '1528436867000' },
];
export default mock;

• 修改 app.js ，导入 list，add，和 mock

import Mock from './mock';
import List from './list/list';
import Add from './add/add';

• 编写列表的展示
  > 重要的就是 2 处，循环代码和输出，用 map（es6 的循环）遍历数据，生成 li 标签，render 渲染代码，

this.mock.map((value, i) => (
  <li key={i}>
    <input type="checkbox" />
    {value.content}
    <span>{this.dateFormatter(value.time)}</span>
  </li>
));

  render() {
    return <ul>{this.listMap()}</ul>;
  }

• 添加的方法，就得和父组件通信，通过 props 拿到父组件的方法，把值传进入，父组件直接改变 mock 的值，就可以直接改变 list 列表的值
  > bind(this)，就是绑定当前 this，也就是这个 class 内容，不然会丢失 this
  > 定义了一个 textValue，当 textarea，有变化的时候，改变 textValue 的值
  > 当点击确定的时候，把传入的数组（mock）,添加一个 json，并调用父组件传递过来的函数，把值传进入

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)},这个就是父组件传递过去的方法

  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，如有不对的，希望大家指出。

壊丶壊

沙发第一次啊~