Question

您好我有一个bootStrap模式，我在App.js组件外部有引导程序的html我直接将模态放在index.html中。我有一个事件onClick，我想在用户点击关闭按钮时执行，我在我的App.js组件中有一个函数名称closeModal（），但该函数未执行。我想是因为以这种方式反应不能执行index.html中的onClick事件。

以下是index.html中的代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
    <title>React App</title>
  </head>
  <body>
    <noscript>
      You need to enable JavaScript to run this app.
    </noscript>
    <div id="root"></div>

    <div class="modal fade" id="myModal" role="dialog">
        <div class="modal-dialog">
            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="congratulationsHeader">Modal Header</h4>
                    <button type="button" class="close" data-dismiss="modal" onClick="javaScript:closeModal()">
                        &times;
                    </button>
                </div>
                <div class="modal-body">
                    <p id="modalBody"></p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal" onClick="javaScript:closeModal()">
                        Close
                    </button>
                </div>
            </div>
        </div>
    </div>
  </body>
</html>

我的组件文件App.js

import React, { Component } from 'react';
import {Map, InfoWindow, Marker, GoogleApiWrapper} from 'google-maps-react';
import ListViewLocation from './ListViewLocation';
import * as GoogleMapsAPI from './utils/GoogleMapsAPI';
import $ from 'jquery';

export class MapContainer extends Component {

    constructor(props) {
        super(props);
        this.closeModal = this.closeModal.bind(this);
    }

    closeModal() {
        alert("Click me...");
    }

    render() {
        return (
            <div className="container">
                <ListViewLocation />
            </div>
        );
    }
}

事件未执行React Native

0 个答案: