0

我正在单击按钮时实现模态窗口。

我的问题是单击按钮时显示对话框组件的最佳方式是什么。我正在尝试设置 CSS 的var modal，这给了我错误。./src/components/btn-root.js Line 14: 'modal' is not defined no-undef

我有以下按钮组件，onclick 将在其上显示模态窗口组件。

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import ModelDialog from './modal-dialog';


 export default class ButtonRoot extends Component{
   render(){

         // Get the button that opens the modal
         var btn = document.getElementById("base-btn");

         // When the user clicks the button, open the modal
         btn.onclick = function() {
             modal.style.display = "block";
         }

     return (
       <button id='base-btn'>Order Credit</button>
     );
   }
 }

以下是模型对话框组件

import React, { Component } from 'react';
import ReactDOM from 'react-dom';


export default class ModelDialog extends Component {
  render(){
    // Get the modal
    var modal = document.getElementById('myModal');

    // Get the <span> element that closes the modal
    var span = document.getElementsByClassName("close")[0];

    return(
      <div id="myModal" className="modal">
        <div className="modal-content">
            <span className="close">&times;</span>
            <div className="order--container">
              <p>5 IV's</p>
              <p>25 IV's</p>
              <p>50 IV's</p>
              <p>100 IV's</p>
              <p>500 IV's</p>
            </div>
            <div className="order--form">
              <form>
                <div className="tc--checkbox">
                  <input type="checkbox" id="subscribeNews" name="subscribe" value="newsletter" />
                  <label for="tcs">I accept Terms & Conditions</label>
                </div>
                <div className="order--btn">
                  <button type="submit">Order</button>
                </div>
              </form>
            </div>
        </div>
      </div>
    );
  }
}
4

1 回答 1

2

回答你的两个问题：

“如何在 ReactJS 的另一个组件中设置一个组件的 const 值？”

将改变变量值的函数作为道具传递给组件。

“我的问题是单击按钮时显示对话框组件的最佳方式是什么。”

您可以简单地使用状态来决定是否呈现模态。你可以命名的东西showModal，在你的渲染函数中做

{this.state.showModal && <YourModalComponent />}
于 2017-12-14T03:04:15.833 回答