1
votes

Masque de conception de fourmi La propriété modale fermable ne fonctionne pas?

J'utilise le modal d'ANT Design dans un autre composant comme ceci:

import React from "react";

class SomeComponent extends React.Component {
  constructor(props) {
    super(props);

    this.state = { 
        modalVisible: false
    };
  }

  toggleModal() {
    const { modalVisible } = this.state;
    this.setState({ modalVisible: !modalVisible });
  }

  render() {
    const { modalVisible } = this.state;

    return (
      <div>
       // some non-modal content     

       <button onClick={() => this.toggleModal()}>Toggle Modal</button>

        <SomeModalWrapper
            modalVisible={modalVisible}
            toggleModal={this.toggleModal}
        />
      </div>
    );
  }
}

export default SomeComponent;

Ce composant est à son tour appelé par un composant parent comme ceci:

import React from "react";
import {
  Modal,
  Button
} from "antd";

class SomeModalWrapper extends React.Component {
  constructor(props) {
    super(props);

    this.state = {};
  }

  handleOk() {
    console.log("OK");
  }

  render() {
    const { modalVisible, toggleModal } = this.props;

    return (
      <Modal
        title="Some Title"
        visible={modalVisible}
        width={300}
        className=""
        destroyOnClose={true}
        footer={[
          <Button key="back" onClick={() => toggleModal()}>
            Return
          </Button>,
          <Button key="submit" type="primary" onClick={this.handleOk}>
            Submit
          </Button>
        ]}
      >
        // some other content
      </Modal>
    );
  }
}

export default SomeModalWrapper;

reactjs antd modal-dialog

0 commentaires

3 Réponses :

3
votes

Le problème ne vient pas de maskClosable qui est la valeur par défaut est vrai .

Vous devez lier this à la fonction toggleModal .
Vous définissez visible = {modalVisible} , ce qui signifie que vous contrôlez l'état modal, avec lui, l'état modalVisible va remplacer maskClosable . En d'autres termes, maskClosable ne peut pas changer votre état par lui-même.

<Modal
  ...
  onCancel={toggleModal}
  ...
>
  // some other content
</Modal>;

Aussi, je suggère toujours en utilisant onCancel , vous pouvez obtenir un comportement inattendu sans cela.

class SomeComponent extends React.Component {
  state = {
    modalVisible: false
  };

  // bind with named class function or with `.bind()` inside consturctor
  toggleModal = () => {
    this.setState(prevState => ({ modalVisible: !prevState.modalVisible }));
  };

  render() {
    ...
  }
}

0 commentaires

2
votes

Vous devez transmettre les accessoires Annuler dans le composant SomeWrapper : c'est-à-dire Somewrapper.js

<Modal
        title="Some Title"
        visible={modalVisible}
        width={300}
        className=""
        onCancel={toggleModal} //pass close logic here
        destroyOnClose={true}
        footer={[
          <Button key="back" onClick={() => toggleModal()}>
            Return
          </Button>,
          <Button key="submit" type="primary" onClick={this.handleOk}>
            Submit
          </Button>
        ]}
      >
        // some other content
      </Modal>

Voici la démo: https: / /codesandbox.io/s/long-shape-7tc3g

2 commentaires

Je ne sais pas pourquoi, je l'ai voté. C'est le seul changement que j'ai fait et cela a fonctionné.

Cela fonctionnera mais cela n'explique pas pourquoi maskClosable ne fonctionne pas, vous pouvez voir l'exemple onCancel sur chaque exemple Modal . J'ai voté contre parce que la question est "la propriété modale maskClosable ne fonctionne pas?" et non "Comment faire fonctionner le modal"

1
votes

Ajout de ceci pour quiconque a commis l'erreur que j'ai faite:

'Spécifiez une fonction qui sera appelée lorsqu'un utilisateur clique sur le bouton OK'

et a rempli inconsciemment ce que 'onCancel' fait comme l'opposé de onOk, malgré ce qui est réellement répertorié, ce qui est:

' Spécifiez une fonction qui sera appelée lorsqu'un utilisateur clique sur le masque, le bouton de fermeture en haut à droite ou le bouton Annuler '.

non seulement à cause de ma propre insouciance, mais aussi à cause d'une dénomination incohérente dans leur API.

1 commentaires

Merci d'avoir signalé cela Yohan! Cela m'a également manqué, pour toute personne intéressée, vous pouvez trouver le libellé original dans l ' API modale