如何在单击后禁用React js中的按钮20秒

在React.js中，要实现在按钮点击后禁用按钮20秒的功能，可以通过以下步骤完成：

在React组件的构造函数中，创建一个状态变量来控制按钮的禁用状态，例如isButtonDisabled，初始值为false。
在按钮的onClick事件处理函数中，将isButtonDisabled状态变量设置为true，以禁用按钮，并使用setTimeout函数设置一个定时器来在20秒后将isButtonDisabled设置为false，以恢复按钮的可用状态。

下面是一个示例的代码实现：

import React, { Component } from 'react';

class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isButtonDisabled: false
    };
  }

  handleClick = () => {
    this.setState({ isButtonDisabled: true });

    setTimeout(() => {
      this.setState({ isButtonDisabled: false });
    }, 20000);
  }

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

    return (
      <div>
        <button onClick={this.handleClick} disabled={isButtonDisabled}>
          Click me
        </button>
      </div>
    );
  }
}

export default MyComponent;

在上述代码中，当按钮被点击时，handleClick函数会将isButtonDisabled设置为true，从而禁用按钮。随后，setTimeout函数会在20秒后执行回调函数，将isButtonDisabled设置为false，使按钮恢复可用状态。

这样，当用户单击按钮后，按钮会在20秒内变为禁用状态，防止用户多次点击。请注意，这个实现是基于React.js框架，所以需要在项目中引入React.js依赖和相关的构建工具。

推荐腾讯云相关产品：无需涉及到特定云计算品牌，因此暂不需要提供腾讯云相关产品链接。