我想要模态当点击按钮

Question

嗨，伙计们，我是react js的新手。我正在尝试构建一个小型模态应用程序，在这个应用程序中，当我点击trigeer button时，我想弹出，我做到了，但没有使用我的方法。如果有人知道，请告诉我如何解决这个问题

modal.js

这是我的表单，当我点击触发按钮时，我想弹出它

import React, { useState } from 'react';
import './Modal.css';
import Popup from 'reactjs-popup';
import Pop from './Pop';
const Modal = () => {
const [mail, setEmail] = useState('');
const [password, setPassword] = useState('');
const handleChange = (e) => {
e.preventDefault();
if (password === "") {
return alert("please Enter Email and Password")
}
else {
return <Popup trigger={
<Pop />
}>
</Popup>
}
}

return (
<div>
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email"
class="form-control"
id="exampleInputEmail1"
aria-describedby="emailHelp"
placeholder="Enter email"
value={mail}
onChange={(e) => setEmail(e.target.value)}
required />
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password"
class="form-control"
id="exampleInputPassword1"
placeholder="Password"
value={password}
onChange={(e) => setPassword(e.target.value)}
required />
</div>
<button type="submit" class="btn btn-primary" onClick={handleChange}>Trigger</button>
</form>
</div>
)
}
export default Modal;

pop.js

import React from 'react'

const Popup = () => {
return (
<div>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Submit
</button>
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal Title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-footer" style={{ display: 'flex', justifyContent: 'space-around' }}>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</div>
)
}

export default Popup;

Answer 1

您可以在这里使用react bootstrap模式组件。

import React, {useState, setShow } from 'react'
import {Modal} from 'react-bootstrap';

const myModal = () => {
//handeling the modal open & close
const [show, setShow] = useState(false);
const handleShow = () => setShow(true);
const handleClose = () => setShow(false);


return (

<>
//this the button that triggers the modal
<button onClick={handleShow}> Show Modal </button>

<Modal className="my-modal" show={show} onHide={handleClose}>
<Modal.Header closeButton className="mymodal-head">
<Modal.Title className="mymodal-title"><h4>The Modal</h4></Modal.Title>
</Modal.Header>
<Modal.Body className="mymodal-body">
//add your input fields and labels here
<input/>
</Modal.Body>
<Modal.Footer className="mymodal-footer">
//add your submit button here
<button> submit </button>
</Modal.Footer>
</Modal>


</>

)
}

希望这能有所帮助！如果您对模态有任何问题，请随时问我：(