[英]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.