如何在 TypeScript 中禁用按钮

TypeScript 1年前 89

要在 TypeScript 中禁用按钮：

选择按钮元素。
使用 setAttribute() 方法设置禁用的属性。
例如，btn?.setAttribute('disabled', '')。

这是本文中示例的 HTML。

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    <input id="submit" type="submit" name="submit" />

    <button id="btn">jiyik</button>

    <script src="./src/index.ts"></script>
  </body>
</html>

这是相关的 TypeScript 代码。

const input = document.getElementById('submit') as HTMLInputElement | null;

// ✅ Set disabled attribute
input?.setAttribute('disabled', '');

// ✅ Remove disabled attribute
// input?.removeAttribute('disabled')

// -----------------------------------------------------------------

const btn = document.getElementById('btn') as HTMLButtonElement | null;

// ✅ Set disabled attribute
btn?.setAttribute('disabled', '');

// ✅ Remove disabled attribute
// btn?.removeAttribute('disabled');

我们使用 document.getElementById 方法选择了元素。

我们使用类型断言来正确键入输入和按钮元素。

当我们有关于 TypeScript 无法知道的值的类型的信息时，使用类型断言。

我们有效地告诉 TypeScript 输入变量存储了一个 HTMLInputElement 或一个空值，不用担心它。

我们使用联合类型来指定变量仍然可以为 null，因为如果 DOM 中不存在具有提供的 id 的 HTML 元素，getElementById() 方法将返回 null 值。

我们使用可选链接 (?.) 运算符来绕过示例中可能出现的空值。

我们使用 setAttribute 方法来设置元素的 disabled 属性。

该方法采用以下 2 个参数：

name – 要设置的属性的名称。
value – 要分配给属性的值。

const input = document.getElementById('submit') as HTMLInputElement | null;

// ✅ Set disabled attribute
input?.setAttribute('disabled', '');

// ✅ Remove disabled attribute
// input?.removeAttribute('disabled')

// -----------------------------------------------------------------

const btn = document.getElementById('btn') as HTMLButtonElement | null;

// ✅ Set disabled attribute
btn?.setAttribute('disabled', '');

// ✅ Remove disabled attribute
// btn?.removeAttribute('disabled');

如果引用等于 null 或 undefined，则可选链接 (?.) 运算符会短路返回 undefined。

换句话说，如果输入变量存储了一个空值，我们将不会尝试对空值调用 setAttribute() 方法并获得运行时错误。

如果元素上已存在 disabled 属性，则 setAttribute 方法将更新该值，否则将添加一个具有指定名称和值的新属性。

在设置布尔属性的值时，例如 disabled，我们可以为该属性指定任何值，它将起作用。

如果该属性完全存在，则无论其值如何，它的值都被认为是真实的。

如果布尔属性不存在，则该属性的值被认为是假的。

如何在 TypeScript 中禁用按钮

如果需要从元素中删除属性，请使用 removeAttribute 方法。

const input = document.getElementById('submit') as HTMLInputElement | null;

// ✅ Set disabled attribute
input?.setAttribute('disabled', '');

// ✅ Remove disabled attribute
input?.removeAttribute('disabled');

// -----------------------------------------------------------------

const btn = document.getElementById('btn') as HTMLButtonElement | null;

// ✅ Set disabled attribute
btn?.setAttribute('disabled', '');

// ✅ Remove disabled attribute
btn?.removeAttribute('disabled');

在设置 disabled 属性时，我们传递一个空字符串作为属性的值，因为最好的做法是设置没有值的布尔属性。

如果未在元素上设置属性，则 removeAttribute 方法将返回而不会引发错误。

如果不想使用可选链接 (?.) 运算符，则可以使用一个简单的 if 语句作为类型保护。

const input = document.getElementById('submit') as HTMLInputElement | null;

// ?️ input has type HTMLInputElement or null here

if (input != null) {
  // ?️ input has type HTMLInputElement here

  // ✅ Set disabled attribute
  input.setAttribute('disabled', '');

  // ✅ Remove disabled attribute
  // input.removeAttribute('disabled');
}