Todos案例（二）01-添加任务——回车事件-回车键的数字标识是13 & e.keyCode === 13 & 自带光标定位-autoFocus

最新推荐文章于 2023-02-04 22:30:59 发布

viceen

最新推荐文章于 2023-02-04 22:30:59 发布

阅读量483

点赞数

分类专栏： redux 文章标签：定位触发器 react reactjs

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

版权

redux 专栏收录该内容

46 篇文章 0 订阅

订阅专栏

添加任务——回车事件-回车键的数字标识是13 & e.keyCode === 13 & 自带光标定位-autoFocus

监听回车事件

<input ref={this.titleRef} onKeyUp={this.handleKeyup} value={etitle} onChange={this.handleEtitle} className="new-todo" placeholder="你想做什么?" />

处理添加业务

handleKeyup = (e) => {
  // 回车键的数字标识是13
  if (e.keyCode === 13) {
    // 按了回车键:添加任务
    let ids = this.state.todos.map(item => {
      return item.id
    })
    let maxId = Math.max.apply(null, ids) + 1
    let todo = {
      id: maxId,
      etitle: this.state.etitle,
      done: false
    }
    // let todos = [...this.state.todos]
    // todos.push(todo)
    this.setState({
      todos: [...this.state.todos, todo],
      etitle: ''
    })
  }
}

自己实现光标定位

1、自带光标-autoFocus

<input value="" placeholder="请输入" autoFocus />

2、自己实现

// 构造函数     this.titleRef = React.createRef()
class Todos extends React.Component {
  constructor (props) {
    super(props)
    this.titleRef = React.createRef()
  }
}
// 标签中
<input ref={this.titleRef} />
// 生命周期
  componentDidMount () {
    // 自己实现光标定位，也可以使用标准的autoFocus属性实现
    this.titleRef.current.focus()
  }