Открыть bootstrap модальный после топора ios http вызов в реакции - PullRequest
Новая
       13

Открыть bootstrap модальный после топора ios http вызов в реакции

2 голосов
/ 17 апреля 2020

Я сделал HTTP-вызов в реакции, используя Ax ios. Работает отлично. Но когда я пытаюсь открыть модальный bootstrap 4 после успешного вызова HTTP. Это показывает мне ошибку «модал не функция». Я пытаюсь решить эту проблему несколькими способами, но не могу решить проблему. Я не загружал весь код, так как он довольно длинный. Дайте мне знать в комментариях, если вы хотите какой-либо дополнительный пример кода. Пожалуйста, помогите. 


import $ from 'jquery';
import '../assets/css/signup.css';
import { Link } from 'react-router-dom';

import axios from 'axios';
import SuccessMessage from './dashboard/SuccessMessage';



class SignUp extends React.Component{
    constructor()
    {
        super()
        this.state={
            firstName:'',
            lastName:'',
            email:'',
            phoneNumber:'',
            password:'',
            confirmPassword:'',
            isSignUp:false

        }
    } 
    componentDidUpdate()
    {
       if(this.state.isSignUp === true)
       {
        let user = {
            firstName: this.state.firstName,
            lastName: this.state.lastName,
            email:this.state.email,
            phoneNumber:this.state.phoneNumber,
            password:this.state.password
        }
        console.log(user);
        var first_name = user.firstName;
        var last_name=user.lastName;
        var email=user.email;
        var phone_no=user.phoneNumber;
        var password = user.password;

        axios.post("http://ec2-14-2a9-69-0b6.us-west-2.compute.amazonaws.com:4000/dashboard/register", {
            first_name,
            last_name,
                email,
                phone_no,
                password
            }, {
                headers: header
            })
            .then(res => {
                console.log(res);
                if(res.status === 200 && res.data.success === true)
                {
                    setTimeout(() =>
                    {
                        $('#signup-success').modal('show');
                    },200)


                }
            })
       }
    }

handleSubmit=(e) =>
    {
        e.preventDefault();
        this.setState({isSignUp:true});
    }

render()
{
return(
     <SuccessMessage heading="Sign Up Successfully!" description="Please login in to access your account"  iconClass="fa fa-check bg-golden flex all-center border-radius-50"  modalId="signup-success"/>
)
}

Компонент сообщения об успехе 


<div className="modal" id={this.props.modalId}>
  <div className="modal-dialog modal-dialog-centered">

    <div className="modal-content">
    <div className="modal-header">
        <h4 className="modal-title">Modal Heading</h4>
        <button type="button" className="close" data-dismiss="modal">&times;</button>
      </div>
      <div className="modal-body align-center" style={style}>
          <i style={icon} className={this.props.iconClass} ></i>
        <h3 className="heading color-black">{this.props.heading}</h3>
        <p className="paragraph color-black">{this.props.description}</p>
      </div>
      <div className="modal-footer">
        <button type="button" className="btn btn-danger" data-dismiss="modal">Close</button>
      </div>

    </div>
  </div>
</div>

Ответы [ 2 ]

2 голосов
/ 17 апреля 2020

Старайтесь не использовать jquery и реагируйте вместе. Вы можете достичь того, что говорите, используя состояние реакции: 

class SignUp extends React.Component{
    constructor()
    {
        super()
        this.state={
            firstName:'',
            lastName:'',
            email:'',
            phoneNumber:'',
            password:'',
            confirmPassword:'',
            isSignUp:false,
            showModal: false

        }
    } 
componentDidUpdate()
{
   if(this.state.isSignUp === true)
   {
    let user = {
        firstName: this.state.firstName,
        lastName: this.state.lastName,
        email:this.state.email,
        phoneNumber:this.state.phoneNumber,
        password:this.state.password
    }
    console.log(user);
    var first_name = user.firstName;
    var last_name=user.lastName;
    var email=user.email;
    var phone_no=user.phoneNumber;
    var password = user.password;

    axios.post("http://ec2-14-2a9-69-0b6.us-west-2.compute.amazonaws.com:4000/dashboard/register", {
        first_name,
        last_name,
            email,
            phone_no,
            password
        }, {
            headers: header
        })
        .then(res => {
            console.log(res);
            if(res.status === 200 && res.data.success === true)
            {
                setTimeout(() =>
                {
                    this.setState({ showModal: true });
                },200)


            }
        })
   }
}

handleSubmit=(e) =>
    {
        e.preventDefault();
        this.setState({isSignUp:true});
    }

render()
{
return(
<div>
{
this.state.showModal &&
     <SuccessMessage heading="Sign Up Successfully!" description="Please login in to access your account"  iconClass="fa fa-check bg-golden flex all-center border-radius-50"  modalId="signup-success"/>
</div>
)
}

Кроме того, я полагаю, у вас есть дисплей: ничего или что-то в модале, когда вы делаете .show, используя jquery. Поместите это так, чтобы оно отображалось всегда, так как оно будет отображаться только в том случае, если состояние истинно.

0 голосов
/ 17 апреля 2020

На самом деле для получения модального Bootstrap для отображения с помощью React (без jQuery) требуется манипулирование DOM. Bootstrap 4 использует jQuery, чтобы добавить модальный фоновый элемент, добавляет класс modal-open к телу и, наконец, добавляет display:block к оболочке .modal.

Поэтому предпочтительнее используя реактивный ремень, реагируйте - bootstrap и т. д. c ... так как они уже компонентизировали Bootstrap Модал.

Если вы должны показать (переключить) Bootstrap Модальный в React без jQuery (или другой компонентной структуры), вот пример: 

class SuccessMessage extends React.Component {
  constructor(props) {
    super(props);
    this.toggle = this.toggle.bind(this);
    this.state = {
        modalClasses: ['modal','fade']
    }
  }

  toggle() {
    document.body.className += ' modal-open'
    let modalClasses = this.state.modalClasses

    if (modalClasses.indexOf('show') > -1) {
        modalClasses.pop()

        //hide backdrop
        let backdrop = document.querySelector('.modal-backdrop')
        document.body.removeChild(backdrop)
    }
    else {
        modalClasses.push('show')

        //show backdrop
        let backdrop = document.createElement('div')
        backdrop.classList = "modal-backdrop fade show"
        document.body.appendChild(backdrop)
    }

    this.setState({
        modalClasses
    })
  }

  render() {
    return (
      <div
        id="messageModal"
        className={this.state.modalClasses.join(' ')}
        tabIndex="-1"
        role="dialog"
        aria-hidden="true"
        ref="messageModal"
      >
        <div className="modal-dialog modal-dialog-centered modal-lg">
          <div className="modal-content">
            <div className="modal-header">
              <h4>
                Success
              </h4>
              ...
            </div>
            <div className="modal-body">
              ...
            </div>
          </div>
        </div>
      </div>
    )
  }
}

Рабочая демонстрация: https://codeply.com/p/4EV36QjwCB

...