Застрял в модальном создании (Javascript и HTML) - PullRequest
Новая
       15

Застрял в модальном создании (Javascript и HTML)

0 голосов
/ 21 апреля 2020

Я только начал работать с Javascript, и я пытаюсь реализовать Модал. Я включил кнопку через индекс. js для индексации. html, но когда я нажимаю кнопку (в браузере), она не генерирует модальный режим. Я не знаю, что я делаю неправильно :-(. Любая рекомендация?

Мои коды следующие: "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>

1 Ответ

0 голосов
/ 21 апреля 2020

Попробуйте что-нибудь подобное. Вам нужно определить его состояние 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;
...