如何在 Reactjs 应用程序的表单的 onChange 标签中捕获退格事件

Question

React 建议使用onChange事件，该事件不允许你使用退格键等键。

export const FormDynamicComponent = ({
formpositions,
position,
handleSubmit,
}: Props) => ( <
form onSubmit = { handleSubmit } > {
formpositions.map(
(formposition, index) => ( <
div key = { formposition } >
<
FormField onChange = { previousPosition(formpositions[formpositions.indexOf(position) + 1], ) }
/> </div >
} < /form> ); / / This code example
for onChange

Answer 1

您可以使用onKeyDown而不是使用onChange。类似的东西

<input onKeyDown={(e)=>{if(e.keyCode === 8) console.log("backspace")}}/>

更新：

KeyboardEvent.keyCode 已被弃用，请改用 KeyboardEvent.key：<input onKeyDown={(e) => { if (e.key === 'Backspace') { console.log('backspace') }}} />

Answer 2

如果退格键出现问题，请附加onKeyUp或onKeyDown事件，但不要删除onChange。 删除最后一个字符后，onKeyUp或onKeyDown将进行检查。

从上面的代码中，您希望包含如下onKeyUp：

<FormField 
onChange = {previousPosition(formpositions[formpositions.indexOf(position) + 1],)}
onKeyUp = {previousPosition(formpositions[formpositions.indexOf(position) + 1],)}/>