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

添加任务——回车事件-回车键的数字标识是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()
  }

光标效果

最后

以上就是着急咖啡为你收集整理的Todos案例（二）01-添加任务——回车事件-回车键的数字标识是13 & e.keyCode === 13 & 自带光标定位-autoFocus的全部内容，希望文章能够帮你解决Todos案例（二）01-添加任务——回车事件-回车键的数字标识是13 & e.keyCode === 13 & 自带光标定位-autoFocus所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。