輸入'{ [x: number]: any; }' 缺少 Pick 中的以下屬性<t, keyof t></t,>

Question

我有這個代碼

interface FormState {
    cardNumber: string,
    month: string,
    year: string
}

    handleInputChange = (event: React.ChangeEvent<MaskedInput>) => {
        this.setState({
            [event.target.name]: event.target.value
        });
    };

TypeScript 不知道event.target的name屬性是什么，但我知道它總是匹配FormState鍵。 與value屬性類似。

我嘗試使用類型斷言修復它，但仍然出現錯誤

type ObjectKey<T> = keyof T;
type ValueOf<T> = T[keyof T];

[event.target.name as ObjectKey<FormState>]: event.target.value as ValueOf<FormState>

我怎樣才能解決這個問題？

Answer 1

只需在 React.ChangeEvent 中添加目標名稱的類型：

handleInputChange = (event: React.ChangeEvent<{name: keyof FormState}>) => {

由於您正在處理輸入更改，因此更好的類型是React.ChangeEvent<HTMLInputElement> ：

type TargetName=keyof FormState
const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    let name = event.target.name as TargetName
    name===''
};