组件拆分详细代码（二）02——Header标题组件 & 回车键的数字标识是13-e.keyCode === 13

组件化拆分——Header标题组件 & 回车键的数字标识是13-e.keyCode === 13

src/views/Header.js

import React from 'react'

class Header extends React.Component {
  constructor (props) {
    super(props)
    this.state = {
      etitle: ''
    }
  }
  handleEtitle = (e) => {
    this.setState({
      etitle: e.target.value
    })
  }
  handleKeyup = (e) => {
    // 回车键的数字标识是13
    if (e.keyCode === 13) {
      // 按了回车键,添加任务,把任务名称传递到父组件即可
      this.props.addTask(this.state.etitle)
      // 清空表单
      this.setState({
        etitle: ''
      })
    }
  }
  render () {
    return (
      <div>
        <header className="header">
          <h1>土豆丝</h1>
          <input onKeyUp={this.handleKeyup} value={this.state.etitle} onChange={this.handleEtitle} className="new-todo" placeholder="你想做什么?" />
        </header>
      </div>
    )
  }
}

export default Header

最后

以上就是淡然胡萝卜为你收集整理的组件拆分详细代码（二）02——Header标题组件 & 回车键的数字标识是13-e.keyCode === 13的全部内容，希望文章能够帮你解决组件拆分详细代码（二）02——Header标题组件 & 回车键的数字标识是13-e.keyCode === 13所遇到的程序开发问题。

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