0

我正在尝试构建一个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;

这就是问题所在：我需要根据hint传递给 HintModal 的道具来更改模态的内容。当我hint从 outside输出时<Modal>，它会按预期运行，显示道具的值。但是当我hint在其中输出时，当任一模式被激活时<Modal>，它会返回“banana”（hintHintModal 的第二个实例的道具的值）。

任何帮助将不胜感激！

4

1 回答 1

0

您正在使用相同的状态和相同的功能来控制所有模态，以打开和关闭模态。

您需要只有一个模态，然后在其中动态呈现消息，或者您需要modalIsOpen在您的状态中为每个模态存储一个变量。

于 2019-02-19T13:58:00.017 回答