如何制作"function inside a react-modal element work"？

Question

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

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

尝试对每个按钮的OnClick事件使用匿名函数。因为当你不在OnClick事件上使用匿名函数时，closemmodal;在每个渲染函数将被触发(参考:OnClick功能反应火灾呈现)

你的代码应该是这样的:

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

更新07/10/2021

我试图使用e.stopPropagation();关闭模态功能，现在按钮可以关闭模态。(归功于这个答案:无法关闭模态)

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

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;

Answer 2

你需要开始调试它，你开始测试你的按钮是否onClick工作

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

Answer 3

你必须这样使用:

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

如react文档中所述:

在JSX回调中必须小心这个的含义。在JavaScript中，默认情况下，类方法没有绑定。如果你忘了绑定这个。handleClick并将其传递给onClick，当函数实际调用时，这将是未定义的。

这不是react特有的行为;它是如何运作的一部分用JavaScript工作。一般来说，如果你引用一个不带()的方法在它之后，如onClick={this。handleClick}，你应该绑定它方法。