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

最新推荐文章于 2024-11-10 01:47:14 发布

原创最新推荐文章于 2024-11-10 01:47:14 发布 · 321 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react #reactjs

redux 专栏收录该内容

46 篇文章

订阅专栏

本文介绍了React中创建Header组件的实现，包括输入框与回车键事件监听。当用户按下回车键时，组件会触发父组件的addTask方法，并清空输入框内容。此示例展示了React组件的状态管理和事件处理机制。

组件化拆分——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