Reactjs单击按钮时添加微调器答案

【问题标题】：Reactjs Add spinner when click buttonReactjs单击按钮时添加微调器
【发布时间】：2019-08-09 13:00:00
【问题描述】：

这是我的代码：

<ButtonOrder
  style={{ background: values.sideNB ? NBColor : NSColor }}
  type="button"
  disabled={isPlacingOrder}
  onClick={handleSubmit}
>
  {isPlacingOrder ? "Đang đặt lệnh" : "Đặt lệnh"}
</ButtonOrder>;

当您单击任何类型为“按钮”的按钮时，如何更改为添加微调器而不是文本

【问题讨论】：

您的意思是隐藏按钮并只显示一个微调器来代替按钮？
我的意思是在按钮而不是文本上查看微调器
使用 FontAwesome 之类的图标突然出现在我的脑海中。如果您可以在点击时更改文本，它也有几个旋转图标。
你的意思是用微调器代替Đang đặt lệnh??

标签： reactjs

【解决方案1】：

如果您只想使用微调器而不是文本 (Đang đặt lệnh)，这里有一种方法。

const ButtonOrder = ({ children, ...rest }) => {
  return <button {...rest}>{children}</button>;
};

const Spinner = () => (
  <img src="https://loading.io/spinners/microsoft/index.svg" class="zoom2" height="20"/>
)

class App extends React.Component {
  state = {
    isPlacingOrder: false
  };

  handleSubmit = () => {
    this.setState(
      {
        isPlacingOrder: true
      },
      () => {
        setTimeout(() => {
          this.setState({
            isPlacingOrder: false
          });
        }, 2000);
      }
    );
  }

  render() {
    const { handleSubmit, state } = this;
    const { isPlacingOrder } = state;

    return (
      <ButtonOrder type="button" disabled={isPlacingOrder} onClick={handleSubmit}>
        {isPlacingOrder ? <Spinner /> : "Đặt lệnh"}
      </ButtonOrder>
    );
  }
}


ReactDOM.render(<App />,document.getElementById("app"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="app"></div>

【讨论】：

【解决方案2】：

您可以查看此实现以解决您的问题。如果您在加载程序应该可见（切换）时使用 redux 或任何 API 调用，那么这很简单，但对于您当前的情况，您可以按照以下步骤操作： https://reactjsexample.com/the-easiest-way-to-manage-loaders-errors-inside-a-button/

如果您使用的是材料或语义，那么您可以使用“spinners”检查他们的文档。

【讨论】：

【解决方案3】：

this.state = {
  disabled: false,
  processing: false
}


<TouchableWhatever disabled={this.state.disabled} onPress={this.click.bind(this)}>
  { this.state.processing 
      ? <ActivityIndicator />
      : <Text>Click me</Text>
  }
</TouchableWhatever>


click() {
  this.setState({
    disabled: true, 
    processing: true
  });
  // login, respond
}

【讨论】：