单击按钮时，ReactJ会添加旋转器

Question

这是我的代码：

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

当您单击任何包含"按钮"的按钮

Answer 1

如果您只想使用旋转器而不是文本（ ^ ^ gang tlệ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>

Answer 2

您可以查看有关问题的实现。如果您使用REDUX或任何API调用，而加载程序应可见（切换），则很简单，但是对于当前情况，您可以遵循以下操作：https://reaectjsexample.com/the-easiest-way-way-to-manage-loaders-loaders-errors-inside-a button/

如果您使用的是材料或语义，则可以使用"旋转器"检查他们的文档。

Answer 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
}