Странное поведение с реагирующим модом - PullRequest
0 голосов
/ 19 февраля 2019

Я пытаюсь создать тест, который использует 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 извне <Modal>, он ведет себя, как и ожидалось, отображая значение реквизита.Но когда я вывожу hint в <Modal>, он возвращает «банан» (значение опоры hint для второго экземпляра HintModal), когда активирован любой из модальных режимов.

Любая помощь будет принята с благодарностью!

1 Ответ

0 голосов
/ 19 февраля 2019

Вы управляете всеми вашими модалами с помощью одного и того же элемента состояния и одних и тех же функций, чтобы открывать и закрывать модал.

Вам нужно либо иметь только один модал, а затем динамически визуализировать сообщение внутри него, либовам нужно хранить переменную modalIsOpen в вашем состоянии для каждого модального значения.

...