Warning: file_get_contents(/data/phpspider/zhask/data//catemap/3/reactjs/21.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 有没有一种方法可以在不使用ANTD上的默认按钮的情况下关闭Modal?_Javascript_Reactjs_Antd_Ant Design Pro - Fatal编程技术网

Javascript 有没有一种方法可以在不使用ANTD上的默认按钮的情况下关闭Modal?

Javascript 有没有一种方法可以在不使用ANTD上的默认按钮的情况下关闭Modal?,javascript,reactjs,antd,ant-design-pro,Javascript,Reactjs,Antd,Ant Design Pro,所以我是ReactJS新手,我正在使用ANT设计,目前正在使用他们的模式。我想知道我们是否可以在不使用OK和Cancel按钮的情况下关闭模式 所以我取下了这些按钮。并在配置中创建了一个按钮。我想用那个按钮关闭模态。任何帮助都会很好!提前谢谢 这是我的密码 const { Modal, Button } = antd; const ReachableContext = React.createContext(); const UnreachableContext = React.create

所以我是ReactJS新手,我正在使用ANT设计,目前正在使用他们的模式。我想知道我们是否可以在不使用OKCancel按钮的情况下关闭模式

所以我取下了这些按钮。并在配置中创建了一个按钮。我想用那个按钮关闭模态。任何帮助都会很好!提前谢谢

这是我的密码

const {  Modal, Button  } = antd;

const ReachableContext = React.createContext();
const UnreachableContext = React.createContext();

const handleButtonOnClick = () => {
  console.log('this button was clicked');
}

const config = {
  visible: false,
  title: 'Use Hook!', icon: null,
  okButtonProps: { style: { display: 'none' } },
  // cancelButtonProps: { style: { display: 'none' } },
  content: (
    <div>
      <ReachableContext.Consumer>
        {sample => (
          <Button
            type='primary'
            block
          >
            Click Me Button
            // IS THERE A FUNCTION THAT I CAN CLOSE THE MODAL USING THIS BUTTON?
          </Button>
         )}
      </ReachableContext.Consumer>
    </div>
  ),
};

const App = () => {
  const [modal, contextHolder] = Modal.useModal();
  return (
    <ReachableContext.Provider value={modal}>
      <Button
        onClick={() => {
          modal.confirm(config);
        }}
      >
        Confirm
      </Button>
      {contextHolder} 
    </ReachableContext.Provider>
  );
};

ReactDOM.render(<App />, mountNode); 
const{Modal,Button}=antd;
const ReachableContext=React.createContext();
const UnreachableContext=React.createContext();
常量把手按钮图标=()=>{
log('单击此按钮');
}
常量配置={
可见:假,
标题:“使用钩子!”,图标:null,
okButtonProps:{style:{display:'none'}},
//cancelButtonProps:{style:{display:'none'}},
内容:(
{sample=>(
点击我按钮
//是否有使用此按钮关闭模式的功能?
)}
),
};
常量应用=()=>{
const[modal,contextHolder]=modal.useModal();
返回(
{
modal.confirm(配置);
}}
>
证实
{contextHolder}
);
};
render(,mountNode);

我就是这样关闭/显示的。我不使用
Ok
cancel
按钮。如果道具
showForm
true
,则模态将显示,否则不会显示

import React, { Component } from "react";
import { connect } from "react-redux";
import * as actions from "../../actions";

import { Modal, Icon } from "antd";

class FormContainerModal extends Component {
  state = {};

  render() {
    const { showForm } = this.props;
    return (
      <>
        <Modal
          title={
            <div>
              Title
            </div>
          }
          destroyOnClose={true}
          footer={null}
          centered
          maskClosable={false}
          onCancel={this.props.closeModal}
          visible={showForm} //it will close the modal if showForm is false
          width="950px"
        >
            <div>
              My Content
            </div>
        </Modal>
      </>
    );
  }
}

const mapStateToProps = state => {
  return {
    showForm: state.form.showForm
  };
};

export default connect(mapStateToProps, actions)(FormContainerModal);
           <Button
            type='primary'
            block
           onClick={()=>this.setState({showForm: false})} //here make showForm to false to close the modal
          >
            Close the Modal
          </Button>