功能点

输入框输入内容回车, 增加一条记录, 同时输入框内容被清空
双击每一条记录的文字内容, 进行编辑修改, 回车或者点击其他区域完成修改
点击每一条记录前面的圆圈, 切换该记录的完成或已完成状态, 圆圈和后面的文字内容随着状态的切换均有样式变化
每一条记录均有删除图标, 点击完成该条记录的删除操作
动态显示未完成事项的个数
三个按钮All, Active, Completed可完成对当前所有事项, 未完成事项, 已完成事项的查询显示
可一次性清除所有已完成事项
所有数据的永久性存储, 即刷新页面或再次启动项目数据仍然保持上次操作的数据记录

增

使用antd的Input+Form控件实现输入框UI, 利用getFieldDecorator()将Input和表单进行双向绑定，每次用户向输入框输入内容并回车后，触发回调事件，通过getFieldsValue()拿到输入框的内容，并将该内容连同iscompleted和id属性作为一个对象推入数组list中，发送dispatch请求完成list的更新。

查

通过自定义不同的页面路由，但使用同一个页面模板，完成全部事项、未完成事项和已完成事项的筛选显示。

在组件中import pathToRegexp from 'path-to-regexp'，并传入location对象，通过location.pathname判断当前页面的路由。

对数组list使用filter()方法，根据当前的路由，过滤出所有iscompleted为true或false的项。

每一条事项的展示放在component展示组件中，即对数组进行map()遍历操作，返回一个子组件，对这个子组件传入这个数组数组的每一项，以及每一项的索引，作为每一条事项的展示组件完成每一条事项的展示。

let todos = []
  if (list.length) {
    let showList = list.filter((value) => {
      //根据当前路由, 确定list数组中需要展示的项
      switch (pathname){
        case '/active': return value.iscompleted === false
        case '/completed': return value.iscompleted === true
        default: return true
      }
    })

    todos = showList.map(function(item, index) {
      //子组件用来定义每一项的展示, 传入展示项以及索引， 和每一个react组件所必须的唯一key值
      return 
    })
  }

删

在点击事件中携带该项纪录的索引值data_key发送dispatch请求，（react组件的唯一key值无法传入组件内部），利用数组的splice()方法(改变原数组)完成数组项的删除操作.

    deleteItem(state, action) {
      state.list.splice(action.payload.data_key, 1)

      localStorage.setItem('list',JSON.stringify(state.list))

      return {
        ...state
      }
    }

改

容器组件的声明采用stateless写法, 展示组件的声明采用ES6写法class TodoItem extends Component{}.

编辑的时候涉及两个状态的变化: isEditing是否编辑以及editText编辑框input的内容。双击文字内容，改变isEditing为true，使隐藏的input框便显示出来。

const ESCAPE_KEY = 27;
const ENTER_KEY = 13;

class TodoItem extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isEditing: false,
      editText: this.props.todo.item
    }
  }

  changeEditState() {
    this.setState({
      isEditing: true
    })
  }

  handleChange(e) {
    console.log(e.target.value)
    this.setState({
      editText: e.target.value
    });

  }

  handleSubmit(e) {
    let val = this.state.editText.trim();
    if (val) {
      // dispatch save
      console.log(val)
      this.setState({
        isEditing: false
      })
    }
  }


  handleKeyDown(event) {
    if (event.which === ESCAPE_KEY) {
      this.setState({
        editText: this.props.todo.item,
        isEditing: false
      });
    } else if (event.which === ENTER_KEY) {
      this.handleSubmit(event);
    }

    this.props.dispatch({
      type: `toDos/applyEdit`,
      payload: {
        editText: this.state.editText,
        id: this.props.todo.id
      }
    })
  }

  componentDidUpdate(prevProps, prevState) {
    //处理光标
    if (!prevState.isEditing && this.state.isEditing) {
      let node = ReactDom.findDOMNode(this.refs.editField);
      node.focus();
      console.log(node.value)
      node.setSelectionRange(node.value.length, node.value.length);
    }
  }

  render() {
    const {
      todo,
      dispatch,
      toDos
    } = this.props;
  }

    return (
        {todo.item}

基于dva-cli实现todoList

功能点

增

查

删

改

数据的存储

总结

你可能感兴趣的:(基于dva-cli实现todoList)