我怎样才能制作"function inside a react-modal element work"？

Question

我是React的初学者，我一直在设计一个简单的电子商务页面，我正面临这个问题。我创建了两个函数，openModal 和 closeModal，它们改变了我创建的模态框的状态。当我在 Modal 标签中使用 closeModal 函数时它会关闭，但如果它被内部按钮元素关闭则它不会关闭。我找不到任何答案，谁能告诉我哪里出错了？

import './Cards.css'
import Modal from 'react-modal'
import { useState } from 'react';
import './Cards.css'


const Cards = ({ name }) => {
    
        const [modalState, setModalState] = useState(false);
    
        const openModal = () => {
            setModalState(true)
        }
    
        const closeModal = () => {
            setModalState(false)
        }
    
    
    
        return (
    
            <div className="card" onClick={openModal}>
                <div className="cardImage">
                    <img src={name.img} />
                </div><br />
                <div className="cardText">
                    <p>{name.brand}</p>
                    <p>{name.model}</p>
                    <p>{name.price}</p>
                </div>
                <Modal isOpen={modalState} onRequestClose={closeModal}>
                    <div className="close"><button onClick={closeModal}>X</button></div><br/>
                    <div>
                    <span className="modalimage"><img src={name.img} /></span>
                    <span className="modaltext">
                        <h2>Description</h2>
                        <p>uehqirfuh fwejhgwfejk wre fwigw giuewhj jfnkjw ejirf nlwekf hwjf  iwue gkjenv  iw niguew nviuwne iuwenv jkwnb bewiurfh hewuihneiwujk gnewui kjlsfnviwejkrgnewui  niuwjg weui nuweoirjgnewujkgneuijkgn ein wiuegniwjrk</p>
                        <br/>
                        <h2>Price</h2>
                        <h3>Rs.{name.price}</h3>
    
                        <button className="buy">Buy Now</button>
                        <button className="cart">Add to Cart</button>
    
                    </span>
                    </div>
                </Modal>
    
            </div>
    
    
        )
    }
    
    export default Cards;

Answer 1

你必须这样使用它：

   class Foo extends Component {
  handleClick = () => {
    console.log('clicked');
  }
  render() {
    return <button onClick={this.handleClick}>click here</button>;
  }
}

如 React 文档中所述 here :

You have to be careful about the meaning of this in JSX callbacks. In JavaScript, class methods are not bound by default. If you forget to bind this.handleClick and pass it to onClick, this will be undefined when the function is actually called.

This is not React-specific behavior; it is a part of how functions work in JavaScript. Generally, if you refer to a method without () after it, such as onClick={this.handleClick}, you should bind that method.

Answer 2

您需要开始调试它，您开始测试您的按钮 id onClick 是否有效

  <div className="close">
   <button onClick={() => alert('button cliked')}>X</button>
  </div>

Answer 3

尝试对每个按钮的 OnClick 事件使用匿名函数。因为当你不在 OnClick 事件上使用匿名函数时，“closeModal”函数将在每次渲染时触发（参考：）

你的代码应该是这样的：

import './Cards.css'
import Modal from 'react-modal'
import { useState } from 'react';

const Cards = ({ name }) => {

    const [modalState, setModalState] = useState(false);

    const openModal = () => {
        setModalState(true)
    }

    const closeModal = () => {
        setModalState(false)
    }



    return (

        <div className="card" onClick={()=>openModal()}>
            <div className="cardImage">
                <img src={name.img} />
            </div><br />
            <div className="cardText">
                <p>{name.brand}</p>
                <p>{name.model}</p>
                <p>{name.price}</p>
            </div>
            <Modal isOpen={modalState} onRequestClose={closeModal}>
                <div className="close"><button onClick={()=>closeModal()}>X</button></div><br/>
                <div>
                <span className="modalimage"><img src={name.img} /></span>
                <span className="modaltext">
                    <h2>Description</h2>
                    <p>uehqirfuh .........</p>
                    <br/>
                    <h2>Price</h2>
                    <h3>Rs.{name.price}</h3>

                    <button className="buy">Buy Now</button>
                    <button className="cart">Add to Cart</button>

                </span>
                </div>
            </Modal>

        </div>


    )
}

export default Cards;

或者您也想让您的网站更漂亮，您可以使用 bootstrap 中包含的模式。 Bootstrap 5 Modal Documentation

2021 年 7 月 10 日更新

我尝试使用 e.stopPropagation(); 关闭模态功能，现在按钮可以关闭模态。（此答案的来源：Unable to close modal）

你的新代码应该是这样的：

import './Cards.css'
import Modal from 'react-modal'
import { useState } from 'react';


const Cards = ({ name }) => {

    const [modalState, setModalState] = useState(false);

    const openModal = () => {
        setModalState(true)
    }

    const closeModal = (e) => {
        e.stopPropagation();
        setModalState(false)
    }



  return (

    <div className="card" onClick={()=>openModal()}>
        <div className="cardImage">
            <img src={name.img} />
        </div><br />
        <div className="cardText">
            <p>{name.brand}</p>
            <p>{name.model}</p>
            <p>{name.price}</p>
        </div>
        <Modal isOpen={modalState} onRequestClose={(e) => closeModal(e)}>
            <div className="close"><button onClick={(e) => closeModal(e)}>X</button></div><br />
            <div>
                <span className="modalimage"><img src={name.img} /></span>
                <span className="modaltext">
                    <h2>Description</h2>
                    <p>uehqirfuh .........</p>
                    <br />
                    <h2>Price</h2>
                    <h3>Rs.{name.price}</h3>

                    <button className="buy">Buy Now</button>
                    <button className="cart">Add to Cart</button>

                </span>
            </div>
        </Modal>

    </div>


   )
}

export default Cards;

我怎样才能制作"function inside a react-modal element work"？

How can I make a "function inside a react-modal element work"?

reactjs

react-hooks

jsx

use-state

react-modal