Question

我的一个React组件中有一些onChange处理程序的输入，我试图重构使用单个方法而不是每个输入一个方法。我正在使用的新方法是

    updatePropertyFromInput = <T, K extends keyof T, V extends T[K]>(targetObject:T, key: K, value: V) => {
    targetObject[key] = value;
}

updateTour = <K extends keyof Tour>(event: React.ChangeEvent<HTMLInputElement>, key: K) => {
    let updatedSelectedTourSpec = JSON.parse(JSON.stringify(this.props.SelectedTourSpec)) as TourSpec;
    let updatedTour = updatedSelectedTourSpec.tours.filter((t) => t.tourCode === this.props.Tour.tourCode)[0];

    this.updatePropertyFromInput(updatedTour, key, event.target.value);
}

为此，我需要能够将事件从onChange属性传递给方法。我之前做过这样的事情

<input type="number" value={this.props.Tour.flightDays} onChange={this.handleFlightDaysChange} />

自动传递的事件。现在我有2个参数，我需要明确地传递事件，如

<input type="number" value={this.props.Tour.flightDays} onChange={() => this.updateTour{[event], "flightDays"} />

我无法弄清楚如何在[event]引用该事件。当我尝试传入this时，它指的是React组件本身。

如何引用要作为参数传递的事件？

Answer 1

只需从onChange获取事件并进一步传递，如下所示：

...onChange={(event) => this.updateTour(event, "flightDays")} />

请记住我也修正了一些不正确的括号。

Answer 2

Event是传递给JS中所有onChange函数的默认参数。您已经将onChange函数从直接调用函数更改为调用箭头函数，并且当您的函数将event作为参数时，箭头函数不会。您需要在箭头函数中添加一些表示事件的内容，如下所示：

<input type="number" value={...} onChange={(event) => this.updateTour(event, "flightDays")} />

因为event是onChange函数的唯一默认参数，所以您可以将event替换为您喜欢的任何内容，但大多数都使用e或event。

如何将事件对象传递给typescript中的onchange处理程序？

2 个答案: