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

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