在 react/redux 应用程序中单击按钮时添加加载器

Question

我正在尝试在 react/redux 应用程序中单击按钮时将加载程序添加为高阶组件。

已经有工作的 Loader 组件和样式，只需要在单击按钮时设置逻辑显示加载器并隐藏现有按钮。

按钮组件:

import React from 'react'

import '../../../styles/components/_statement-print.scss';
import Loader from './Loader';

const StatementPrint = (props) => {
  return (
    <div>

      <button
        className="print-statement-button"
        onClick={props.handleStatementPrint}>PRINT
      </button>

    </div>
  );
};

export default Loader(StatementPrint);

加载器:

import React, { Component} from 'react';

import '../../../styles/components/_loader.scss';

const Loader = (WrappedComponent) => {
  return class Loader extends Component {
    render() {
      return this.props.handleStatementPrint // Where must be logic when to show loader or existing button component
        ? <button className="loader-button">
            <div className="loader">
              <span className="loader-text">LOADING...</span>
            </div>
          </button>
        : <WrappedComponent {...this.props} />
    }
  }
}

export default Loader;

在 Loader 组件中，我在需要编写逻辑的地方添加了注释，何时设置加载器或按钮。

我遵循了这个例子：ReactCasts - Higher Order Components

我搜索了很多示例，但其中大部分展示了如何设置加载器，然后是数据正在获取，但在我的情况下，我只需要展示然后触发 onClick 方法。

那么当onClick方法被触发时如何设置逻辑呢？这是一个好方法吗？另外，最好尝试使用 redux state 完成此操作，但不知道该怎么做。

任何帮助将不胜感激。

Answer 1

只需要一些外部状态。如果你不能有外部状态（例如 isLoading），那么你可以将一个函数传递给一个 loader hoc，它将从当前的 props

派生 isLoading

示例：https://codesandbox.io/s/8n08qoo3j2

Answer 2

您必须进行小的修改才能实现您想要的效果。包装器组件 Loader 可以有一个 isLoading 状态，您可以在此基础上决定是显示加载器跨度还是包装组件。

这个状态 isLoading 可以通过将 showLoader 函数作为属性传递给包装组件来更新。

按钮组件

import React from 'react'

import '../../../styles/components/_statement-print.scss';
import Loader from './Loader';

const StatementPrint = ({handleStatementPrint, showLoader}) => {
  return (
    <div>

      <button
        className="print-statement-button"
        onClick={() => {
          showLoader();
          handleStatementPrint();
        }}>
        PRINT
      </button>

    </div>
  );
};

export default Loader(StatementPrint);

加载程序

import React, { Component} from 'react';

import '../../../styles/components/_loader.scss';

const Loader = (WrappedComponent) => {
  return class Loader extends Component {
    constructor(props) {
      super(props);
      this.state = {
        isLoading: false
      }

      this.showLoader = this.showLoader.bind(this);
    }

   showLoader() {
     this.setState({isLoading: true});
   }

    render() {
      return this.state.isLoading 
        ? <button className="loader-button">
            <div className="loader">
              <span className="loader-text">LOADING...</span>
            </div>
          </button>
        : <WrappedComponent 
            {...this.props} 
            showLoader={this.showLoader}
          />
    }
  }
}

export default Loader;

编辑

由于需要调用 handleStatementPrint，我更新了点击处理程序以包含该功能。
还使用解构来避免重复输入 props。有关详细信息，请参阅 here。

在 react/redux 应用程序中单击按钮时添加加载器

Add loader on button click in react/redux application

javascript

loader

reactjs

redux

higher-order-components