在 React Js 中，我想嘗試在點擊卡片后打開模態，但在點擊卡片后沒有打開模態

Question

請幫我解決這個問題我想在點擊n卡后打開模態。 我有使用按鈕，在此之下，我使用卡。

    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

您可以有條件地渲染模型。 如果單擊按鈕，則我們正在顯示模型

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

渲染模態並在單擊時顯示它：

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

根據react-bootstrap 文檔

您應該使用屬性： show : When true 模態將顯示自己。

例子：

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