React中怎么给input添加键盘事件。

最新推荐文章于 2024-05-15 16:26:07 发布

左眼皮一直跳

最新推荐文章于 2024-05-15 16:26:07 发布

阅读量3.3k

点赞数 1

分类专栏：前端文章标签： react

本文链接：https://blog.youkuaiyun.com/supperi/article/details/106928773

版权

前端专栏收录该内容

40 篇文章

订阅专栏

这篇博客介绍了如何在React组件中为input元素添加键盘事件监听，特别是当用户按下enter键时，能够达到与点击提交按钮相同的效果。通过绑定keyup事件并自定义inputKeyUp方法，可以实现这一功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

React 中怎么给 input 添加键盘事件。

1.当前有一个组件，为了实现输入完成后点 enter键与点击提交按钮达成同样的提交效果。

import React, { Component } from 'react'
import './ToDoIpnut.css'

export default class ToDoIpnut extends Component {
    constructor(props) {
        super(props)
    
        this.state = {
             inputValue:''
        }
    }
    
    render() {
        return (
            <div className='ToDoIpnut'>
                <input
                placeholder='请输入待办事项！'
                onChange={this.inputChange}
                value={this.state.inputValue}
                onKeyUp={this.inputKeyUp}
                ></input>
                <button onClick={this.addList1}>
                    提交
                </button>
            </div>
        )
    }
    inputChange=(e)=>{
        this.setState({
            inputValue: e.target.value
        })
    }
    //添加待办事项
    addList1=()=>{
        this.props.addList(this.state.inputValue)
        this.setState({
            inputValue:'' 
        })
    }
    //input绑定键盘事件
    inputKeyUp=(e)=>{
        console.log(e.keyCode);
        if(e.keyCode===13){
            this.addList1()
        }
    }
}

2. 首先给input绑定keyup事件，让它触发一个我们自定的inputKeyUp方法。

                <input
                placeholder='请输入待办事项！'
                onChange={this.inputChange}
                value={this.state.inputValue}
                onKeyUp={this.inputKeyUp}
                ></input>

2.1 给input绑定onKeyUp事件，触发自定义方法inputKeyUp。

onKeyUp={this.inputKeyUp}

2.2 定义方法 inputKeyUp。e.keyCode 用于显示按键的键盘码，13 是 enter 的键盘码。
判断键盘码等于 13，即触发 enter 键时，我们调用原本属于提交按钮方法 addList1 ，
这样既可达到和提交按钮一样的提交效果。

    //input绑定键盘事件
    inputKeyUp=(e)=>{
        console.log(e.keyCode);
        if(e.keyCode===13){
        	//调用和提交按钮同样的方法
            this.addList1()
        }
    }