Блог

Главная - Вопросы по программированию - Реагировать Семантический пользовательский интерфейс Модальный closeicon не работает

Реагировать Семантический пользовательский интерфейс Модальный closeicon не работает

#javascript #reactjs #semantic-ui

Вопрос:

Я хочу создать модал для своего приложения. Я перепробовал все, и мой closeicon не закроет мой модальный. Это прекрасно работает, когда я делаю модальный в том же файле, но я хочу сделать свой модальный как отдельный компонент. Что-то не так с моим кодом?

Родительский компонент:

 import { Card, Placeholder, Image, Icon } from "semantic-ui-react";
import BookModal from "./BookModal";
import { useState } from "react";

const BookCard = props => {

    const [showModal, setShowModal] = useState(false)


    return (
        <Card onClick={() => setShowModal(true)}>
            <Image><Placeholder><Image src={props.image} size="large" /></Placeholder></Image>
            <Card.Content>
                <Card.Header>{props.title}</Card.Header>
                <Card.Meta>
                    <span className='date'>{props.publishedDate}</span>
                </Card.Meta>
                <Card.Description>{props.author}</Card.Description>
            </Card.Content>
            <Card.Content extra>
                <Icon name='star'>Rating</Icon>    
            </Card.Content>
            <BookModal key="Modal1" open={showModal} onClose={() => setShowModal(false)}/>
        </Card>
     );
}
 
export default BookCard;

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

 import { Modal } from "semantic-ui-react";

const BookModal = props => {

    return ( 
        <Modal
          closeIcon
          onClose={props.onClose}
          open={props.open} >

            <Modal.Header>
              <h2>Modal content</h2>
            </Modal.Header>

        </Modal>
     );
}

 
export default BookModal;

Комментарии:

1. Похоже на опечатку — в компоненте BookModal вы задаете <Modal> открытое состояние props.isOpen , но в компоненте BookCard вы передаете ему свойство , называемое open , а не isOpen

2. Исправлено, но все равно ничего, когда я утешаю. журнал ShowModal при нажатии кнопки Закрыть, он все время говорит правду

Ответ №1:

Вы столкнулись с интересной проблемой-когда вы нажимаете значок X, чтобы закрыть модальный, <Card> компонент также получает этот щелчок!

Таким onClick образом, обработчик в коде карты запускается при попытке закрыть модал и снова устанавливает состояние «открыто true «. Это происходит после запуска onClose обработчика в модале, поэтому модал останется открытым.

Вместо этого вы можете изменить код, чтобы открыть модальный по <Image> щелчку:

     <Card>
      <Image
        onClick={() => setShowModal(true)}
      >
        <Placeholder>
          <Image src={props.image} size="large" />
        </Placeholder>
      </Image>
      <Card.Content>
        <Card.Header>{props.title}</Card.Header>
        <Card.Meta>
          <span className="date">{props.publishedDate}</span>
        </Card.Meta>
        <Card.Description>{props.author}</Card.Description>
      </Card.Content>
      <Card.Content extra>
        <Icon name="star">Rating</Icon>
      </Card.Content>
      <BookModal
        key="Modal1"
        open={showModal}
        onClose={() => setShowModal(false)}
      />
    </Card>

Вы можете увидеть, как все это работает здесь: https://codesandbox.io/s/semantic-ui-example-forked-yy7p3?file=/BookCard.js

Поскольку <Image> компонент является родным братом, а не родителем <BookModal> компонента, щелчок не будет «проваливаться» или «всплывать» (какую бы семантику вы ни предпочитали) в него.

Другой способ-сохранить модальный триггер внутри модального. Вот как это делают их собственные примеры-вы можете найти упрощенный здесь: https://codesandbox.io/s/semantic-ui-example-forked-qo99z?file=/example.js

Метки: