如何在打字稿中执行 document.getElementById().value 之类的操作？

Question

我有一些代码，其中包含一个反应表单，其中包含类似的内容：

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

我有一个通过单击按钮调用的函数，我想获取 id“region”的值。

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

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 元素。您必须改为使用

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

尝试

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

Answer 4

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

如果您尝试做的事情没有按预期进行，那是有另一个原因。

Answer 5

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

private regioninput: HTMLInputElement;

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

你的元素改变：

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