点击按钮时Reactjs添加微调器

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

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

如果您使用的是材料或语义，则可以使用“旋转器”查看其文档。

Answer 2

如果您只想使用微调框而不是文本（ angđặtl ），请执行以下操作。

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