[JavaScript知识库]Log:2021-12-13

1.学习antd弹出窗口组件Modal的使用

import React, { createRef,useState,useEffect,useRef } from 'react';
import ReactDOM from 'react-dom';
import 'antd/dist/antd.css';
import './index.css';
import { Tabs } from 'antd';
import $ from 'jquery'
import Calendar from 'react-calendar'
import 'react-calendar/dist/Calendar.css';
import { Modal, Button } from 'antd';

class MyExcuse extends React.Component{
  constructor(props) {
    super(props);
    this.handleSubmit = this.handleSubmit.bind(this);
    this.handleOk=this.handleOk.bind(this);
    this.state = {isModalVisible:false};
  }
  //处理弹出消息框点击"OK"按钮
  handleOk()
  {
    this.setState({isModalVisible:false});
  }
  //处理提交按钮
  handleSubmit(event) {
    this.setState({isModalVisible:true});
    event.preventDefault();
  }
  render() {
    return (
      <form value={this.state.value} onSubmit={this.handleSubmit} >
       <div>
        <Modal title="标题" visible={this.state.isModalVisible} onOk={this.handleOk} >
        <p>自定义内容</p>
      </Modal>
      </div>
        <input type="submit" value="提交" />
      </form>
    );
  }

}

ReactDOM.render(<MyExcuse source="http://localhost:8087/getScenario"  />, document.getElementById('root'));