typescript - 类型 'target' 上不存在属性 'KeyboardEventHandler'

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