Fatal编程技术网
  • reactjs/
  • Reactjs 在axios http调用react后打开引导模式

Reactjs 在axios http调用react后打开引导模式

reactjs react-native bootstrap-4

Reactjs 在axios http调用react后打开引导模式,reactjs,react-native,bootstrap-4,axios,Reactjs,React Native,Bootstrap 4,Axios,我使用Axios在react中进行了HTTP调用。它工作得非常好。但当我尝试在HTTP调用成功后打开Bootstrap4模式时。它向我显示了一个错误“模态不是函数”。我尝试了许多方法来解决这个问题，但无法解决这个问题。我没有上传整个代码，因为它很长。如果您需要任何额外的代码示例，请在注释中告诉我。请帮忙 import $ from 'jquery'; import '../assets/css/signup.css'; import { Link } from 'react-router-do

我使用Axios在react中进行了HTTP调用。它工作得非常好。但当我尝试在HTTP调用成功后打开Bootstrap4模式时。它向我显示了一个错误“模态不是函数”。我尝试了许多方法来解决这个问题，但无法解决这个问题。我没有上传整个代码，因为它很长。如果您需要任何额外的代码示例，请在注释中告诉我。请帮忙


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"/>
)
}



从“jquery”导入美元；
导入“../assets/css/signup.css”；
从'react router dom'导入{Link}；
从“axios”导入axios；
从“./dashboard/SuccessMessage”导入成功消息；
类注册扩展了React.Component{
构造函数（）
{
超级（）
这个州={
名字：''，
姓氏：“”，
电子邮件：“”，
电话号码：“”，
密码：“”，
确认密码：“”，
isSignUp:错误
}
} 
componentDidUpdate（）
{
if（this.state.isSignUp==true）
{
让用户={
名字：this.state.firstName，
lastName:this.state.lastName，
电子邮件：this.state.email，
phoneNumber:this.state.phoneNumber，
密码：this.state.password
}
console.log（用户）；
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", {
名字，
姓，
电子邮件，
电话号码:，
密码
}, {
标题：标题
})
。然后（res=>{
控制台日志（res）；
if（res.status==200&&res.data.success==true）
{
设置超时（（）=>
{
$（“#注册成功”）.modal（'show'）；
},200)
}
})
}
}
handleSubmit=（e）=>
{
e、 预防默认值（）；
this.setState（{isSignUp:true}）；
}
render（）
{
返回(
)
}
成功消息组件


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



模态标题
&时代；
{this.props.heading}

{this.props.description}

接近
尽量不要同时使用jquery和react。使用react状态可以实现您所说的：

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

类注册扩展了React.Component{
构造函数（）
{
超级（）
这个州={
名字：''，
姓氏：“”，
电子邮件：“”，
电话号码：“”，
密码：“”，
确认密码：“”，
isSignUp:错，
showModal:错误
}
} 
componentDidUpdate（）
{
if（this.state.isSignUp==true）
{
让用户={
名字：this.state.firstName，
lastName:this.state.lastName，
电子邮件：this.state.email，
phoneNumber:this.state.phoneNumber，
密码：this.state.password
}
console.log（用户）；
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", {
名字，
姓，
电子邮件，
电话号码:，
密码
}, {
标题：标题
})
。然后（res=>{
控制台日志（res）；
if（res.status==200&&res.data.success==true）
{
设置超时（（）=>
{
this.setState（{showmodel:true}）；
},200)
}
})
}
}
handleSubmit=（e）=>
{
e、 预防默认值（）；
this.setState（{isSignUp:true}）；
}
render（）
{
返回(
{
this.state.showmodel&&
)
}
另外，我猜您在使用jquery进行.show时得到了一个显示：none或模态中的某个内容。将其设置为始终显示，因为只有当状态为true时才会显示它。

实际使用React（无jquery）获得引导模态显示需要DOM操作。Bootstrap 4使用jQuery添加模态背景元素，将
模态打开
类添加到正文中，最后将
显示：块
添加到
模态
包装器中

这就是为什么最好使用react-Strap、react-bootstrap等，因为它们已经将引导模式组件化了

如果必须在React without 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>
    )
  }
}

类成功消息扩展了React.Component{
建造师（道具）{
超级（道具）；
this.toggle=this.toggle.bind（this）；
此.state={
模态类：['modal'，'fade']
}
}
切换（）{
document.body.className+=“模式打开”
让modalClasses=this.state.modalClasses
if（modalClasses.indexOf（'show'）>-1）{
modalClasses.pop（）
//隐藏背景
让background=document.querySelector（“.modal background”）
document.body.removeChild（背景）
}
否则{
modalClasses.push（'show'）
//展示背景
让background=document.createElement（'div'）
background.classList=“模态背景淡出显示”
document.body.appendChild（背景）
}
这是我的国家({
modalClasses
})
}
render（）{
返回(
成功
...
...
)
}
}
工作演示：

Hmmm，将jquery与react混合使用通常不起作用