坚持模式创建（Javascript 和 HTML）

Question

我刚刚开始使用 Javascript，我正在尝试实现模态框。我已经包含了一个从 index.js 到 index.html 的按钮，但是当我单击按钮（在浏览器中）时，它不会生成 de modal。我不知道我做错了什么:-(。有什么建议吗？

我的代码如下： "index.js"

import React from 'react';
import ReactDOM from 'react-dom';
import './App.css'
import './assets/css/bootstrap.min.css'
import './assets/css/bootstrap.min.css.map'
import './assets/css/now-ui-kit.css'
import './assets/css/now-ui-kit.css.map'
import './assets/css/now-ui-kit.min.css'


const teste = (
<React.Fragment>
<div class="row" id="modals">
    <div class="col-md-2"></div>
    <button class="btn btn-primary" data-toggle="modal" data-target="#myModal">
      Launch Modal
    </button>
  </div>
  
  <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header justify-content-center">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
            <i class="now-ui-icons ui-1_simple-remove"></i>
          </button>
          <h4 class="title title-up">Modal title</h4>
        </div>
        <div class="modal-body">
          <p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth.
         </p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default">Nice Button</button>
          <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>
</React.Fragment>
);

ReactDOM.render(teste, document.getElementById('modalteste'));

"index.html"

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <!--     Fonts and icons     -->
  <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700,200" rel="stylesheet" />
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css"
    integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
  <!-- CSS Files -->
  <link href="./assets/css/bootstrap.min.css" rel="stylesheet" />
  <link href="./assets/css/now-ui-kit.css?v=1.3.0" rel="stylesheet" />
  <title>React App</title>
</head>

<body>

  <header id="header"></header><br>
  <div id="root"></div> <br>
  <div id="modalteste"></div> 
  

</body>  
</html>

Answer 1

尝试这样的事情。您需要将其状态定义为 false。这个例子会起作用。

class EditBlog extends Component {
    state = {
        modal: false,


    }

    static propTypes = {
        auth: PropTypes.object.isRequired
    }

    toggle = () => {
        this.setState({
            modal: !this.state.modal
        });
    }

    onChange = (e) => {
        this.setState({ [e.target.name] : e.target.value });
    }

    onSubmit = (e) => {
        e.preventDefault();
        const newBlog = {

        this.toggle();
    }
    render(){
        const { isAuthenticated, user } = this.props.auth;

        return(
            <span>

                <a className="btn edit-btn-blog-post" href="#" onClick={this.toggle} >
                    <i className="fa fa-pencil" aria-hidden="true"></i>
                </a>
                <Modal 
                    isOpen = {this.state.modal}
                    toggle = {this.toggle}    
                ></Modal>

                <Modal 
                    isOpen = {this.state.modal}
                    toggle = {this.toggle}    
                >
                    <ModalHeader toggle={this.toggle}>
                        Add to blog List
                    </ModalHeader>
                    <ModalBody>
                        <Form onSubmit ={this.onSubmit }>
                            <FormGroup>
                                <Label for="blogHeading">Blog Heading</Label>
                                <Input type="text" name="blog_short_desc" id="blogHeading" placeholder="Add one liner"
                                onChange={this.onChange} value={this.props.blog_short_desc}/>
                                 <Label for="blogName">Blog Name</Label>
                                <Input type="text" name="blog_name" id="blogName" placeholder="Add blog name"
                                onChange={this.onChange}/>
                                <Label for="desc1">Description </Label>
                                <Input type="textarea" name="blog_desc" id="desc1" placeholder="Add your blog"
                                onChange={this.onChange}/>
                                 <Label for="imageUrl">Image Url</Label>
                                <Input type="text" name="blog_image_link" id="imageUrl" placeholder="Add image url (Optional)"
                                onChange={this.onChange}/>


                                <Button
                                    color="dark"
                                    style={{marginTop: '2rem'}}
                                    block
                                >Edit blog</Button>
                            </FormGroup>
                        </Form>
                    </ModalBody>
                </Modal>
            </span>
        )
    }
}


export default EditBlog;

坚持模式创建（Javascript 和 HTML）

Stuck with Modal creation (Javascript and HTML)

html

javascript

bootstrap-modal