类型“KeyboardEventHandler<HTMLInputElement>”上不存在属性“目标”

Question

当我尝试访问其输入目标并获取其值时，我的 vscode 在输入 onKeyUp 函数中出现错误。

import React from 'react';

import styles from './styles.module.scss';

export function Step3() {
    function handleKeyUp(e: React.KeyboardEventHandler<HTMLInputElement>) {
        console.log(e.target.value);
    }

    return (
        <div className="d-flex justify-content-between">
            <input
                type="text"
                className="f-size-30 mt-3"
                name="name"
                placeholder="Type your name"
                onKeyUp={handleKeyUp}
            />
        </div>
    );
}

我的“e”参数应该是什么类型？

Answer 1

考虑一下这个名字：

React.KeyboardEventHandler

处理程序通常是处理事件的函数的名称- 它是回调，而不是事件本身。事件是处理函数的参数，但处理函数不是事件参数。

如果您想使用该React.KeyboardEventHandler类型，请将handleKeyUp函数注释为该类型。

您还需要访问currentTarget，而不是target。

export function Step3() {
    const handleKeyUp: React.KeyboardEventHandler<HTMLInputElement> = (e) => {
        console.log(e.currentTarget.value);
    }

    return (
        <div className="d-flex justify-content-between">
            <input
                type="text"
                className="f-size-30 mt-3"
                name="name"
                placeholder="Type your name"
                onKeyUp={handleKeyUp}
            />
        </div>
    );
}

另一种选择（当处理程序很短时我更喜欢这种选择）是内联定义它，以便可以自动确定类型，并且您不必费力自己找出正确的名称：

export function Step3() {
    return (
        <div className="d-flex justify-content-between">
            <input
                type="text"
                className="f-size-30 mt-3"
                name="name"
                placeholder="Type your name"
                onKeyUp={(e) => console.log(e.currentTarget.value)}
            />
        </div>
    );
}