所以下面的代码是在Angular 4中，我不明白为什么它不能按预期的方式工作。
这是我的处理程序的一个片段:
onUpdatingServerName(event: Event) {
console.log(event);
this.newserverName = event.target.value; //this wont work
}
HTML元素:
<input type="text" class="form-control" (input)="onUpdatingServerName($event)">
代码给出了错误:
属性“value”在类型“EventTarget”上不存在。
但是在console.log中可以看到，该值确实存在于event.target上。
当前回答
事件。target在这里是一个HTMLElement，它是所有HTML元素的父元素，但不保证有属性值。TypeScript检测到并抛出错误。事件。目标到适当的HTML元素，以确保它是HTMLInputElement，它有一个value属性:
(event.target as HTMLInputElement).value
根据文档:
输入$event 上面的例子将$event转换为任意类型。这以一定的代价简化了代码。没有类型信息可以揭示事件对象的属性并防止愚蠢的错误。 […] $event现在是一个特定的KeyboardEvent。并非所有元素都具有value属性，因此它将target转换为输入元素。
(强调我的)
其他回答
您也可以创建自己的界面。
export interface UserEvent {
target: HTMLInputElement;
}
...
onUpdatingServerName(event: UserEvent) {
.....
}
我建议创建一个实用程序类型:
interface MyEvent<T extends EventTarget> extends Omit<Event, 'target'> {
target: T;
}
然后像这样使用它:
function onChange({ target: { value } }: MyEvent<HTMLInputElement>) => {
doSomethingWith(value);
}
声明接口
export interface HTMLInputEvent extends Event {
target: HTMLInputElement & EventTarget;
}
哪种类型可以作为不同输入事件的类型重用
public onChange(event: HTMLInputEvent) {
const value = event.target.value;
}
React有一些接口，比如ChangeEvent用于onChange, FormEvent用于onSubmit等
我也试着做类似的事情，下面的解决方案对我有用
handleChange (e : React.ChangeEvent<HTMLInputElement>) {
console.log(e.currentTarget.value);
}
<input
autoFocus
value={this.state.account.username}
onChange={this.handleChange}
id="username"
type="text"
className="form-control"
/>
如你所知，TypeScript一直严格遵循元素数据类型。因此，如果不指定元素的数据类型，就不能直接访问元素的属性。该事件。target是一个HTMLElement，它是所有HTML元素的父元素，但不保证有属性值。
因此，我们需要对变量event进行类型转换。目标，那么只有我们可以从它访问value属性。
OnUpdatingServerName (event: Event) {
console.log(event);
var element = event.target as HTMLElement
this.newserverName = element.value;
}
