Question

我正在使用物化，而模态不起作用。

在我的index.html中，我导入了库：

＆＃13;

<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
  <script src="./js/utils.js"></script>

＆＃13;

在我的utils.js中，我为模态添加了初始化代码：

＆＃13;

(function($) {
  $(document).ready(function() {
    // the "href" attribute of the modal trigger must specify the modal ID that wants to be triggered
    $('.modal').modal({
      dismissible: true, // Modal can be dismissed by clicking outside of the modal
      opacity: .5, // Opacity of modal background
      inDuration: 300, // Transition in duration
      outDuration: 200, // Transition out duration
      startingTop: '4%', // Starting top style attribute
      endingTop: '10%', // Ending top style attribute
      ready: function(modal, trigger) { // Callback for Modal open. Modal and trigger parameters available.
        alert("Ready");
        console.log(modal, trigger);
      },
      complete: function() { alert('Closed'); } // Callback for Modal close
    });
  })
})(jQuery);

＆＃13;

在我的组件中，我将模态和按钮触发，但不起作用：

＆＃13;

import React, { Component } from 'react';

class WeddingTest extends Component {
  render() {
    return (
      <div>
      <div className="container">
      
        <a className="waves-effect waves-light btn modal-trigger" href="#modal1">Modal</a>
        
        <div id="modal1" className="modal">
          <div className="modal-content">
            <h4>Modal Header</h4>
            <p>A bunch of text</p>
          </div>
          <div className="modal-footer">
            <a href="#!" className="modal-action modal-close waves-effect waves-green btn-flat">Agree</a>
          </div>
        </div>
      </div>
      </div>
    );
  }
}

export default WeddingTest;

＆＃13;

我在这里遗漏了什么吗？当我点击按钮时，模态没有打开。

我做了一个测试，将代码放在App.js中并且工作了！我在这里很困惑。也许没有与反应组件或其他东西的兼容性。

提前致谢

Answer 1

我认为，你应该在componentDidMount中放置modal插件的初始化，因为当你尝试在$（document）.ready中初始化jquery插件时，页面上没有

import React, { Component } from 'react';

class WeddingTest extends Component {
  componentDidMount(){
     $('.modal').modal({
      dismissible: true, 
      opacity: .5, // Opacity of modal background
      inDuration: 300, // Transition in duration
      outDuration: 200, // Transition out duration
      startingTop: '4%', // Starting top style attribute
      endingTop: '10%', // Ending top style attribute
      ready: function(modal, trigger) { 
        alert("Ready");
        console.log(modal, trigger);
      },
      complete: function() { alert('Closed'); } 
    });
  } 

  render() {
    return (
      <div>
      <div className="container">

        <a className="waves-effect waves-light btn modal-trigger" href="#modal1">Modal</a>

        <div id="modal1" className="modal">
          <div className="modal-content">
            <h4>Modal Header</h4>
            <p>A bunch of text</p>
          </div>
          <div className="modal-footer">
            <a href="#!" className="modal-action modal-close waves-effect waves-green btn-flat">Agree</a>
          </div>
        </div>
      </div>
      </div>
    );
  }
}

export default WeddingTest;

实现css模态不与反应组件一起使用

1 个答案: