React + TypeScript: Uncaught TypeError: this is undefined

Question

我对 React 和 TypeScript 都很陌生，我正在尝试构建一个有状态组件来计算制作面包面团的重量和百分比。

我遵循了 https://reactjs.org/ 主页上的有状态组件示例。

当我更改 target-weight 输入的值时，出现以下行的异常：

updateTargetWeight(e: React.SyntheticEvent): void {
    this.setState({targetWeight: this.getInputValue(e)}); // ERROR
    this.calculate();
}

Uncaught TypeError: this is undefined

当我像这样使用匿名函数时，它工作正常。

onInput={(e: React.SyntheticEvent) => {
    this.setState({hydrationPercentage: this.getInputValue(e)});
    this.calculate();
}}

我是不是忽略了什么，或者没看懂什么？

export interface DoughFormProps {
    hydrationPercentage: number,
    yeastPercentage: number,
    saltPercentage: number,
    targetWeight: number,
    flourWeight: number,
    waterWeight: number,
    yeastWeight: number,
    saltWeight: number,
}

class DoughCalculatorForm extends React.Component<{}, DoughFormProps> {

    constructor(props: DoughFormProps) {

        super(props);

        this.state = {
            hydrationPercentage: 68,
            yeastPercentage: 1,
            saltPercentage: 2,
            targetWeight: 600,
            flourWeight: 0,
            waterWeight: 0,
            yeastWeight: 0,
            saltWeight: 0
        };
    }

    getInputValue(e: React.SyntheticEvent): number {
        const target = e.target as HTMLInputElement;
        return parseInt(target.value);
    }

    updateTargetWeight(e: React.SyntheticEvent): void {
        this.setState({targetWeight: this.getInputValue(e)});
        this.calculate();
    }

    calculate() {}

    render() {
        return (
            <form>
                <div className="input-container">
                    <label>
                        Target weight
                        <input type="number"
                               name="target-weight"
                               value={this.state.targetWeight}
                               onInput={this.updateTargetWeight}
                        />
                    </label>
                </div>
                <div className="input-container">
                    <label>
                        Hydration percentage
                        <input type="number"
                               name="hydration-percentage"
                               value={this.state.hydrationPercentage}
                               onInput={(e: React.SyntheticEvent) => {
                                   this.setState({hydrationPercentage: this.getInputValue(e)});
                                   this.calculate();
                               }}
                        />
                    </label>
                </div>
            </form>
        );
    }
}

export default DoughCalculatorForm;

Answer 1

constructor(){

    this.updateTargetWeight = this.updateTargetWeigth.bind(this); <---- THIS

}

updateTargetWeight(e: React.SyntheticEvent): void {
    this.setState({targetWeight: this.getInputValue(e)});
    this.calculate();
}

当您将函数定义为非箭头函数时，通常需要绑定它*

(* = 有一些插件（webpack/babel 我不记得了）会自动为您执行此操作，但您需要配置它们）

另一种方法是将其定义为箭头函数，当您定义内联函数时，它起作用了，因为它是一个箭头函数。

updateTargetWeight = (e: React.SyntheticEvent): void => {
    this.setState({targetWeight: this.getInputValue(e)});
    this.calculate();
}

React + TypeScript: Uncaught TypeError: this is undefined

React + TypeScript: Uncaught TypeError: this is undefined

javascript

typescript

reactjs

react-typescript