如何在 onClick 函数中将繁忙的光标添加到 reactstrap 模态按钮。该功能是一个承诺

Posted 2023-03-23

【中文标题】如何在 onClick 函数中将繁忙的光标添加到 reactstrap 模态按钮。该功能是一个承诺

【英文标题】：How to add busy cursor to reactstrap modal button in onClick function. The function is a promise

【发布时间】：2019-01-12 07:53:59

【问题描述】：

我使用了 https://reactstrap.github.io/components/modals/ 的 reactstrap 模态

import React from 'react';
import  Button, Modal, ModalHeader, ModalBody, ModalFooter  from 'reactstrap';

class ModalExample extends React.Component 
  constructor(props) 
    super(props);
    this.state = 
      modal: false
    ;

    this.toggle = this.toggle.bind(this);
  

  toggle() 
    this.setState(
      modal: !this.state.modal
    );
  

  render() 
    return (
      <div>
        <Button color="danger" onClick=this.toggle>this.props.buttonLabel</Button>
        <Modal isOpen=this.state.modal fade=false toggle=this.toggle className=this.props.className>
          <ModalHeader toggle=this.toggle>Modal title</ModalHeader>
          <ModalBody>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
          </ModalBody>
          <ModalFooter>
            <Button color="primary" onClick=this.toggle>Do Something</Button>' '
            <Button color="secondary" onClick=this.toggle>Cancel</Button>
          </ModalFooter>
        </Modal>
      </div>
    );
  


export default ModalExample;

我的“做某事”按钮的 onclick 功能是一个承诺。而这个函数是在另一个组件中定义的。我想在 promise 函数加载数据时添加繁忙的光标。如何实现这一点？我的项目有一个 scss 文件。

【参考方案1】：

基本上，您需要向元素添加一个 CSS 类，执行您的承诺，当它完成或失败时，您需要删除该类。该类可能看起来像这样。

.wait-cursor 
  cursor: wait;

【讨论】：

谢谢。但是当我在另一个组件类的功能中，有什么方法可以选择按钮组件并去掉这个光标呢？

这将取决于您对项目进行编码的方式。您可以将其作为文档上的事件侦听器，或响应 redux 中的状态更改，或其他可能性