反应 + TypeScript：未捕获的类型错误：这是未定义的

Question

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

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

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

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

未捕获的类型错误：这是未定义的

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

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

当您将 function 定义为 NOT 箭头 function 时，您通常需要绑定它*

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

另一种方法是将它定义为箭头 function，当你定义你的 function 内联它工作，因为它是一个箭头 function。

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