Todos案例（二）04-修改任务——显示焦点-e.persist() 异步访问事件属性（如在setTimeout内） & 输入框内容根据id同步进行更新变化显示

最新推荐文章于 2022-10-27 17:23:49 发布

viceen

最新推荐文章于 2022-10-27 17:23:49 发布

阅读量1k

点赞数

分类专栏： redux 文章标签： reactjs

本文链接：https://blog.csdn.net/weixin_44867717/article/details/117856713

版权

redux 专栏收录该内容

46 篇文章 0 订阅

订阅专栏

修改任务——显示焦点-e.persist() 异步访问事件属性（如在setTimeout内） & 输入框内容根据id同步进行更新变化显示

进入编辑状态和离开编辑状态

<div className="view" onDoubleClick={this.handleDoubleClick.bind(this, item.id)}>

离开编辑状态

<input onBlur={this.handleDoubleClick.bind(this, item.id)} className="edit" />

离开逻辑

  // handleBlue = (id) => {
  //   // 编辑状态失去焦点触发
  //   let todos = [...this.state.todos]
  //   todos.some(item => {
  //     if (item.id === id) {
  //       // 找到后把对应done状态取反
  //       item.isEdit = !item.isEdit
  //       // 终止继续遍历
  //       return true
  //     }
  //     return false
  //   })
  //   this.setState({
  //     todos: todos
  //   })
  // }

进入和离开编辑状态-共用逻辑

handleDoubleClick = (id) => {
  // 获取label元素的父元素的下一个兄弟元素 input
  let input = e.target.parentNode.nextSibling
    // e.persist()  异步访问事件属性（如在setTimeout内）
  setTimeout(() => {
    // 页面已经显示input元素之后才控制获取焦点
// let input = e.target.parentNode.nextSibling    // 配合e.persist()使用 
    input&&input.focus()
  }, 0)
  // 双击进入编辑状态;或者失去焦点是，取消编辑状态
  let todos = [...this.state.todos]
  todos.some(item => {
    if (item.id === id) {
      // 找到后把对应isEdit状态取反
      item.isEdit = !item.isEdit
      // 终止继续遍历
      return true
    }
    return false
  })
  this.setState({
    todos: todos
  })
}

双击进入编辑状态-效果

在这里插入图片描述

编辑提交动作
- 输入框内容发生变化时直接根据id更新todos数组中的相应问题内容

<input value={item.etitle} onChange={this.handleEditEtile.bind(this, item.id)} onBlur={this.handleDoubleClick.bind(this,item.id)} className="edit" />

handleEditEtile = (id, e) => {
  // 控制数组中对应标题的变化
  let todos = [...this.state.todos]
  todos.some(item => {
    if (item.id === id) {
      // 把最新的输入内容进行更新
      item.etitle = e.target.value
    }
  })
  this.setState({
    todos: todos
  })
}