React TypeScript中this.handleInput类型错误及未读取问题求解

核心错误分析 #

1. this类型错误：要么混淆了函数组件/类组件的写法，要么类组件中未正确绑定this。
2. handleInput未被读取：实际调用的this.handleInput和定义的函数不匹配（参数、this指向问题），且事件类型用错（按钮点击事件是MouseEvent而非ChangeEvent）。

方案1：函数组件（推荐） #

函数组件无需使用this，直接调用定义的函数，同时修正事件类型：

import React from 'react';

// 修正事件类型为鼠标点击事件，用currentTarget确保获取绑定事件的按钮元素
const handleInput = (e: React.MouseEvent<HTMLButtonElement>) => {
    console.log(e.currentTarget.value);
};

// 组件内直接使用
<PaymentButton
    value={'creditCard'}
    onClick={handleInput} // 直接传函数，无需额外包裹
>
    <div className="paymentButtonIcon">
        <CreditCard size={16}/>
    </div>
    CREDIT CARD
</PaymentButton>

方案2：类组件 #

如果是类组件，需正确绑定this，同时修正事件类型：

import React, { Component } from 'react';

class YourComponent extends Component {
    // 用箭头函数定义，自动绑定this，避免类型错误
    handleInput = (e: React.MouseEvent<HTMLButtonElement>) => {
        console.log(e.currentTarget.value);
    };

    render() {
        return (
            <PaymentButton
                value={'creditCard'}
                onClick={this.handleInput} // 此时this指向组件实例，无类型问题
            >
                <div className="paymentButtonIcon">
                    <CreditCard size={16}/>
                </div>
                CREDIT CARD
            </PaymentButton>
        );
    }
}

关键注意点 #

• 按钮的onClick事件对应React.MouseEvent，而非ChangeEvent（后者用于输入框onChange事件）。
• 优先用e.currentTarget.value代替e.target.value，避免点击按钮内部子元素时无法获取正确value值。
• 函数组件禁止使用this；类组件中要么用箭头函数定义方法，要么在构造函数中手动绑定this（如this.handleInput = this.handleInput.bind(this)）。

内容的提问来源于stack exchange，提问作者Pedro Schinke