如何在打字稿中做类似 document.getElementById().value 的事情？

Question

我有一些代码包含一个反应形式，其中有这样的东西：

<input id="region"></input>

我有一个从按钮单击调用的函数，我想获取 id“区域”的值。

我已经看到据说我可以做这样的事情：

let test : string = <HTMLInputElement>document.getElementById(region).value;

但我可以验证周日的 8 种方式都行不通。 如果我尝试这样做，我会收到语法错误，说缺少逗号。

那么有没有办法做到这一点？ 我错过了什么？ 把我当作白痴对待，因为我只用了 48 小时打字。

Answer 1

由于标签，我假设您正在使用React，因此，我假设以下代码在tsx文件中。

let test : string = <HTMLInputElement>document.getElementById(region).value;

您不能在TSX文件中使用尖括号转换，因为TypeScript会假定您正在尝试使用React Element。 您必须改用as铸件的形式：

let test : string = (document.getElementById(region) as HTMLInputElement).value;

Answer 2

我想添加一些注释，因为我无法发表评论。 在使用 TypeScript 时，虽然所有有效的 JS 也是有效的 TS，但 @Heretic Monkey 是对的，DOM 通常不用于操作值。

此外，您的 TypeScript 中有两个错误：

--- let test : string = <HTMLInputElement>document.getElementById(region).value; ---

首先，我相信您不能同时初始化变量并访问元素的值。 您应该首先将变量分配给输入元素，然后使用该变量访问其值。 例子：

let test : string = <HTMLInputElement>document.getElementById(region);

console.log( test.value );

其次，在这两种情况下都应该引用元素的id 。 在标签本身内分配 id 以及尝试访问它时。

let test : string = <HTMLInputElement>document.getElementById( "region" );

这个问题有点晚了，但如果它没有解决并且你还在苦苦挣扎，那就试试吧。 希望能帮助到你。

Answer 3

Typescript是Javascript的超集。 每个有效的Javascript代码都是有效的Typescript代码。

如果您尝试执行的操作未如预期那样工作，则是由于另一个原因。

Answer 4

您必须在react中使用ref：然后在函数中调用它。 像这样

private regioninput: HTMLInputElement;

constructor(props) {
    super(props);
    this.regioninput = null;
    this.setregionInputRef = element => {
        this.stepInput = element;
    };
}

您的元素更改：

   <input type="text" ref={this.setregionInputRef} />