在 React Js 中，我想尝试在点击卡片后打开模态，但在点击卡片后没有打开模态

Question

Please help me to sort out this problem I want to open modal after clicking n card. I have use button and under that, I use card.

    import React from 'react';
    import ReactDOM from 'react-dom';
    import 'bootstrap/dist/css/bootstrap.min.css';
    import { Button } from 'react-bootstrap';
    import CardDesing from './CardDesing'
    import Modals from './Modal';


    class App extends React.Component {

        render() {
            return (

                <Button onClick={this.onCardClick} className="unstyled-button">
                    <CardDesing /> 
                </Button>

            );
        }

        onCardClick = () => {
            console.log("hello");
            return (
                <Modals />
            );
        }
    }

    ReactDOM.render(<App />, document.querySelector("#root"))

Answer 1

You can render your model conditionally. if button is clicked then we are showing model

import React from 'react';
import ReactDOM from 'react-dom';
import 'bootstrap/dist/css/bootstrap.min.css';
import { Button } from 'react-bootstrap';
import CardDesing from './CardDesing'
import Modals from './Modal';

class App extends React.Component {

    state = {
      isClicked : false // button clicked or not 
    }

   // set new state to your isClicked
   onCardClick = () => {
       this.setState({ isClicked : !this.state.isClicked }) 
    }

    render() {
        return (
          <>
            <Button onClick={this.onCardClick} className="unstyled-button">
                <CardDesing /> 
            </Button>
            {
                this.state.isClicked ?   <Modals /> : '' 
            }
         </>
        );
    }
}

ReactDOM.render(<App />, document.querySelector("#root"))

Answer 2

Render modal and just show it on click:

state = {
  show: false
}
render() {
  return (
    <>
     <Button onClick={this.onCardClick} className="unstyled-button">
        <CardDesing /> 
     </Button>
     { this.state.show && <Modals /> || '' }
   </>
  );
}

onCardClick = () => {
  this.setState({ show: true })
}

Answer 3

According to react-bootstrap docs

You should use the property: show : When true The modal will show itself.

Example:

function Example() {
    const [show, setShow] = useState(false);

    const handleClose = () => setShow(false);
    const handleShow = () => setShow(true);

    return (
        <div>
            <Button variant="primary" onClick={handleShow}>
                Launch demo modal
            </Button>

            <Modal show={show} onHide={handleClose}>
                {/*  */}
            </Modal>
        </div>
    );
}