JSX 中的禁用按钮 - JavaScript

在 JSX 中，我们可以使用 disabled 属性来禁用按钮，以防止用户与按钮交互。禁用按钮在某些情况下非常有用，比如在某些操作正在进行时禁止用户重复点击按钮。

以下是禁用按钮的示例代码：

import React from 'react';

class MyButton extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      disabled: false
    };
  }

  handleClick = () => {
    // 执行某些操作...

    // 禁用按钮
    this.setState({
      disabled: true
    });

    // 模拟操作完成后的延迟
    setTimeout(() => {
      // 恢复按钮可用状态
      this.setState({
        disabled: false
      });
    }, 2000);
  }

  render() {
    const { disabled } = this.state;

    return (
      <button onClick={this.handleClick} disabled={disabled}>
        {disabled ? '处理中...' : '点击按钮'}
      </button>
    );
  }
}

在上面的代码中，我们创建了一个名为 MyButton 的 React 组件。组件的状态中包含一个 disabled 属性，用于控制按钮的可用状态。当按钮被点击后，我们将 disabled 属性设置为 true 来禁用按钮，并在模拟操作完成后的延迟之后将其设置为 false 来恢复按钮的可用状态。

在按钮的 JSX 中，我们将 onClick 事件处理函数设置为 handleClick 方法，并使用 disabled 属性来决定按钮是否禁用。如果按钮被禁用，按钮的文本将显示为 "处理中..."，否则显示为 "点击按钮"。

以上代码片段是使用 JavaScript 编写的 JSX 组件，用于在 React 应用中展示一个具有禁用按钮功能的示例按钮。