Reactstrap

Question

我正在尝试使用 Reactstrap 中的按钮和微调器实现类似的效果

<Button color="primary" disabled>
  Loading<Spinner style={{ width: '0.5rem', height: '0.5rem' }} type="grow" color="light" /><Spinner style={{ width: '0.5rem', height: '0.5rem' }} type="grow" color="light" /><Spinner style={{ width: '0.5rem', height: '0.5rem' }} type="grow" color="light" />
</Button>

但是，当我在代码中执行此操作时，按钮中的微调器显示为 [object Object]。知道如何让它呈现为旋转器吗？我试过将微调器括在方括号和大括号中，但我尝试过的任何东西似乎都不起作用。

import React, { Component } from 'react';
import { Form, FormGroup, Col, Button, Spinner } from 'reactstrap';

export class MyComp extends Component {
  static displayName = MyComp.name;

  constructor(props) {
    super(props);
    this.state = {
      processing: false
    }
  }

  showProcessing = () => {
    this.setState({ processing: true });
  }

  hideProcessing = () => {
    setTimeout(this.setState({ processing: false }), 2000);
  }

  submitHandler = event => {
    event.preventDefault();

    event.target.className += " was-validated";

    const isValid = event.target.checkValidity();

    if (isValid) {
      const data = new FormData(event.target);
      let currentComponent = this;

      fetch('/api/form-submit-url', {
        method: 'POST',
        body: data,
      })
        .then(function (response) {
          //resrtform
          currentComponent.hideProcessing();
          return response.json();
        })
        .then(function (data) {
          console.log(data);
        })
        .catch(function (err) {
          currentComponent.hideProcessing();
          console.log("Something went wrong!", err);
        });
    }
  }

  render() {
    return (
      <Form onSubmit={this.submitHandler} noValidate action="/someurl" method="POST">

        <FormGroup row>
          <Col sm={6} />
          <Col sm={4}>
            <Button color="primary" onClick={this.showProcessing} >
              {!this.state.processing ? 'Sumbit' : 'Loading..' + (<Spinner style={{ width: '0.7rem', height: '0.7rem' }} type="grow" color="light" />)}
            </Button>
          </Col>
        </FormGroup>

      </Form>
    );
  }
}

Answer 1

您正在向 JSX 组件添加字符串。以下代码有效

<Button color="primary" onClick={this.showProcessing}>
  {!this.state.processing ? "Submit" : "Loading"} 
  {this.state.processing ? (
    <Spinner
      style={{ width: "0.7rem", height: "0.7rem" }}
      type="grow"
      color="light"
    />
  ) : null }
</Button>

Answer 2

根据@VarunDevPro 的回答，您可以使用 size="sm" 而不是 style 并设置 width/height

<Button color="primary" onClick={this.showProcessing}>
<span>Submit</span> // default text
  {this.state.processing ? (
    <Spinner
      size="sm"
      type="grow"
      color="light"
    />
  ) : null }
</Button>

Reactstrap - 如何在按钮内正确渲染微调器？

Reactstrap - How do I render the spinner properly within a button?

reactjs