[英]How to trigger bootstrap modal programatically in reactjs
Onclick 的按钮我需要验证一些数据,如果是真的那么我需要打开模态或不。 但在我的情况下,每次点击都无法以编程方式打开模式
function verifyOtp(){
if(sucsess){}
else{}
}
<button onClick={()}=>verifyOtp() data-toggle="modal" data-target="#successModal">
</button>
<div className="modal fade" id="successModal" tabindex="-1" role="dialog" aria-labelledby = "emailModalLabel" aria-hidden="true">
<div className="modal-dialog email-modal-dialog" role="document">
<div className="modal-content verify-modal-dialog">
<div className="modal-header email-modal-header">
<button type="button" className="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<p className="modal-title email-modal-title" id="emailModalLabel">Succesfull</p>
</div>
</div>
</div>
您需要使用 State 这里是 model 的工作级组件示例。 如果您使用的是功能组件,则使用 useState() 钩子而不是 this.setState() 方法
import React from "react";
export default class AddNewList extends React.Component {
state = {
showModal: false
};
closeModal = () => {
this.setState({ showModal: false });
};
onSave = () => {
console.log("i saved the data.");
this.setState({ showModal: false });
};
verifyOtp = () => {
//your success value
if (true) {
this.setState({ showModal: true });
}
};
render() {
return (
<>
<div>
<button onClick={this.verifyOtp} className="btn btn-primary btn-lg">
Open Modal
</button>
</div>
{this.state.showModal && (
<div className="" id="addnewlist">
<div className="modal-dialog">
<div className="modal-content">
<div className="modal-header">
<h4 className="modal-title"> Model Header</h4>
</div>
<div className="modal-body">
test
</div>
<div className="modal-footer">
<button
type="button"
className="btn btn-danger"
data-dismiss="modal"
onClick={this.closeModal}
>
Close
</button>
<button
type="button"
className="btn btn-outline-success"
onClick={this.onSave}
>
Save
</button>
</div>
</div>
</div>
</div>
)}
</>
);
}
}
功能组件的骨架
import React, {useState} from 'react'
const [showModel,setShowModel] = useState(false);
function AddNewList (){
closeModal = () => {
setShowModel(false);
};
onSave = () => {
setShowModel(false);
};
verifyOtp = () => {
//your success value
if (true) {
setShowModel(true);
}
};
return render();
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.