Question

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

我的问题是在按钮上显示对话框组件的最佳方法是什么。我正在尝试设置var modal的CSS，这给了我错误。 ./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>
    );
  }
}

Answer 1

回答你的两个问题：

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

传递一个函数，将变量值作为道具更改为组件。

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

您可以简单地使用状态来决定是否渲染模态。您可以命名为showModal的东西，并在渲染功能中执行

{this.state.showModal && <YourModalComponent />}

如何在ReactJS中设置其他组件中一个组件的const值？

1 个答案: