如何禁用 TypeScript 中的按钮

作者

在 TypeScript 中禁用按钮

How to disable a Button in TypeScript

要禁用 TypeScript 中的按钮：

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

以下是本文示例的 HTML。

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

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

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

这是相关的 TypeScript 代码。

源代码/index.ts
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 不知道的值类型的信息时，使用类型断言。

我们有效地告诉 TypeScriptinput变量存储一个HTMLInputElement或一个null值而不用担心它。

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

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

我们使用
setAttribute
方法disabled在元素上设置属性。

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

  1. name– 要设置的属性的名称。
  2. value– 分配给属性的值。
源代码/index.ts
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');

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

换句话说，如果input变量存储一个null 值，我们将不会尝试调用该setAttribute()方法并得到运行时错误。 null

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

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

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

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

禁用按钮

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

源代码/index.ts
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语句作为
类型保护。

源代码/index.ts
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');
}

我们明确地检查input变量不存储null值。

TypeScript 知道input变量HTMLInputElement在if块中的类型，并允许我们直接调用该setAttribute()方法。

null在调用方法之前
选择从类型中排除哪种setAttribute()方法是个人喜好问题。

null但是，包含在类型断言中始终是最佳实践，因为如果找不到提供的元素，该getElementById方法将返回。nullid

–

发表评论