Почему SweetAlert для React / Bootstrap 4.4 не работает, когда установлено состояние? - PullRequest
Новая
       15

Почему SweetAlert для React / Bootstrap 4.4 не работает, когда установлено состояние?

0 голосов
/ 28 января 2019

Я использую SweetAlert для React / Bootstrap 4.4 из https://www.npmjs.com/package/react-bootstrap-sweetalert. После установки я пытаюсь добавить сладкое оповещение в функцию рендеринга, но получаю ошибку: 

index.js:1446 Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object.

Check your code at Company.js:41.

Я пытаюсьсделать ту же демонстрацию, что и https://github.com/djorg83/react-bootstrap-sweetalert/blob/master/lib/demo/DemoHome.jsx. Я думаю, что нет никаких проблем, но я ошибаюсь. 

import React, { Component } from 'react';
const SweetAlert = require('react-bootstrap-sweetalert');

class Company extends Component {
  constructor(props) {
    super(props);
    this.state = {id: '1', name: '', description: '', show: false, alert: null}
    this.handleNameChange = this.handleNameChange.bind(this);
    this.handleDescChange = this.handleDescChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
    this.showAlert = this.showAlert.bind(this);
  }

  componentDidMount() {

  }

  handleNameChange(event) {
    this.setState({name: event.target.value});
  }

  handleDescChange(event) {
    this.setState({description: event.target.value});
  }

  handleSubmit(event) {
    event.preventDefault();
    fetch('http://sample.local/api/company/save', {
      method: 'POST',
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(this.state)
    });
  }

  showAlert(event) {
    this.setState({
        alert: (
          <SweetAlert
            type="danger"
            title="Whoops!"
            onConfirm={this.hideAlert}
          >
            That didn't work.
          </SweetAlert>
        )
    });
  }

  hideAlert() {
    this.setState({
      alert: null
    });
  }

  render() {
    return (
      <div>
        <button onClick={this.showAlert}>Alert</button>
        {this.state.alert}
      </div>
    );
  }
}
export default Company;

Я хочу показать предупреждение при нажатии кнопки Alert и скрыться после нажатия кнопки Confirm.Пожалуйста, помогите мне, я не могу увидеть, где терпят неудачу.

* Редактировать: Попробуйте другие, но не работает 

showAlert(event) {
    const getAlert = () => (
      <SweetAlert 
        success 
        title="Woot!" 
        onConfirm={() => this.hideAlert()}
      >
        Hello world!
      </SweetAlert>
    );

    this.setState({
      alert: getAlert()
    });
  }
...