[英]Odd behavior with react-modal
我正在嘗試建立一個使用react-modal
提供提示的測驗。 我將在測驗中需要多個模態。 我是React的新手,所以我很可能犯了一個簡單的錯誤。
我不確定是否很重要,但是我已經使用create-react-app
構建了它。
我的App.js看起來像這樣:
import React, { Component } from 'react';
import HintModal from './hintModal';
import Modal from 'react-modal';
import './App.css';
Modal.setAppElement('#root');
class App extends Component {
state = {
modalIsOpen: false,
hint: ''
};
openModal = (hint) => {
this.setState({ modalIsOpen: true, hint: hint });
}
closeModal = () => {
this.setState({ modalIsOpen: false, hint: '' });
}
render() {
return (
<React.Fragment>
<h1>Modal Test</h1>
<h2>First Modal</h2>
<HintModal
modalIsOpen={this.state.modalIsOpen}
openModal={this.openModal}
closeModal={this.closeModal}
hint="mango"
/>
<hr />
<h2>Second Modal</h2>
<HintModal
modalIsOpen={this.state.modalIsOpen}
openModal={this.openModal}
closeModal={this.closeModal}
hint="banana"
/>
</React.Fragment>
);
}
}
export default App;
hintModal.jsx看起來像這樣:
import React, { Component } from 'react';
import Modal from 'react-modal';
const HintModal = (props) => {
const {openModal, modalIsOpen, closeModal, hint} = props;
return (
<React.Fragment>
<button onClick={ () => openModal(hint) }>Open Modal</button>
<Modal
isOpen={modalIsOpen}
onRequestClose={closeModal}
contentLabel="Example Modal"
>
<h2>Hint</h2>
<p>{hint}</p>
<button onClick={closeModal}>Close</button>
</Modal>
<p>We should see: {hint}</p>
</React.Fragment>
);
};
export default HintModal;
這是問題所在:我需要根據傳遞給HintModal的hint
道具來更改模式的內容。 當我從<Modal>
外部輸出hint
,它的行為符合預期,顯示了prop的值。 但是,當我在<Modal>
輸出hint
時,當任一模式被激活時,它將返回“ banana”(HintModal的第二個實例的hint
道具的值)。
任何幫助將不勝感激!
您將以相同的狀態和相同的功能來控制所有模態,以打開和關閉模態。
您只需要有一個模態,然后在其中動態呈現消息,或者您需要為每個模態在狀態中存儲一個modalIsOpen
變量。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.