Блог

Я пытаюсь открыть модал из другого компонента. это в моем родительском компоненте:

 import { Button, Modal } from 'react-bootstrap';
import React, { useState } from 'react';
import './App.css';
import ModalB from './ModalB';

function App() {
  const [showA, setShowA] = useState(false);
  const [showB, setShowB] = useState(false);

  const handleCloseA = () => setShowA(false);
  const handleShowA = () => setShowA(true);

  const handleShowB = ({ handleShow }) => {
    setShowB(handleShow);
  };


  return (
    <div className="App">
      <header className="App-header">

        <Button variant="primary" onClick={handleShowA}>Open A</Button>
        <Button variant="primary" onClick={handleShowB}>Open B</Button>

        <Modal show={showA} onHide={handleCloseA}>
          <Modal.Header closeButton>
            <Modal.Title>In Modal A</Modal.Title>
          </Modal.Header>
        </Modal>

        <ModalB isModalVisible={showB}></ModalB>

      </header>
    </div>
  );
}

export default App;
 

И Модальный компонент B:

 import { Button, Modal } from 'react-bootstrap';
import React, { useState } from 'react';
import { propTypes } from 'react-bootstrap/esm/Image';

const ModalB = (props) => {
    const [showB, setShowB] = useState(false);
    const handleCloseB = () => setShowB(false);
    const handleShowB = () => setShowB(true);

    return (
        <div>
            <Modal show={props.isModalVisible} onHide={handleCloseB}>
                <Modal.Header closeButton>
                    <Modal.Title>In Modal B</Modal.Title>
                </Modal.Header>
            </Modal>
        </div>
    );

}

export default ModalB;
 

Проблема заключается в отображении B из основного компонента. Хотя отображение модалы простое, я не понимаю, как указать B для отображения из основного компонента.

Спасибо за вашу помощь.

Удалите состояние «показать» ModalB и передайте handleShowB обработчик от родителя.

 const ModalB = ({ isModalVisible, handleShowB }) => {
  return (
    <div>
      <Modal show={props.isModalVisible} onHide={handleShowB}>
        <Modal.Header closeButton>
          <Modal.Title>In Modal B</Modal.Title>
        </Modal.Header>
      </Modal>
    </div>
  );
}
 

В родительском handleShowB обработчике передачи. Здесь мы просто передаем анонимный обратный вызов, чтобы вызвать setShowB средство обновления состояния и обновить showB состояние до ложного.

 <ModalB
  isModalVisible={showB}
  handleShowB={() => setShowB(false)}
/>
 

const handleShowB = ({ handleShow }) => { setShowB(handleShow); };

Зачем вам это нужно handleShow , если это не определено?

Просто обновите свое состояние на основе текущего состояния, и остальная часть вашего кода будет работать нормально.

 const handleShowB = () => setShowB(!showB);
 

Это вызовет текущее модальное состояние (скрытие/отображение погоды) для ModalB компонента, и он будет отображаться соответствующим образом.

Вот рабочая демонстрация: https://codesandbox.io/s/show-multiple-modals-edv6y