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

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()
        }
    }