Reactstrap - как правильно отрисовать счетчик в кнопке? - PullRequest
Новая
       93

Reactstrap - как правильно отрисовать счетчик в кнопке?

1 голос
/ 21 июня 2020

Я пытаюсь достичь чего-то подобного, используя кнопку и счетчики в 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]. Есть идеи, как заставить его рендерить как спиннеры? Я попытался заключить спиннеры в скобки и фигурные скобки, но ничего из того, что я пробовал, похоже, не работает. 

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

1 Ответ

2 голосов
/ 21 июня 2020

Вы добавляете строку в компонент JSX. Следующий код работает 

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