javascript - 如何在 React 中执行此 Javascript 代码?

我正在使用 React 框架制作应用程序。

所以我这里的问题是我想在 React 中执行这个 JS 代码。它基本上应该动态显示和隐藏 <div>。这是我想使用 React 运行的 <script> 标记中的代码:

<script>
  var modal = document.getElementById("myModal");

  var btn = document.getElementById("myBtn");

  var span = document.getElementsByClassName("close")[0];

  btn.onclick = function() {
    modal.style.display = "block";
  }

  span.onclick = function() {
    modal.style.display = "none";
  }
</script>

这是CSS -

body {font-family: Arial, Helvetica, sans-serif;}

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}

/* The Close Button */
.close {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

和 HTML -

<h2>Modal Example</h2>

<!-- Trigger/Open The Modal -->
<button id="myBtn">Open Modal</button>

<!-- The Modal -->
<div id="myModal" class="modal">

  <!-- Modal content -->
  <div class="modal-content">
    <span class="close">&times;</span>
    <p>Some text in the Modal..</p>
  </div>

</div>

我在许多教程中看到 componentDidMount 有帮助。但它不起作用。另外,我发现 componentDidMount 相当复杂。那么有没有另一种方法可以在 React 中运行这个 JS 代码?

回答1

好的,这应该让你开始。您的普通 html/js 大致转换为此。 (CSS保持原样)

class MyModalApp extends React.Component {
  constructor(props) {
    super(props);
    this.state = {showModal: false};
    this.openModal = this.openModal.bind(this);
    this.closeModal = this.closeModal.bind(this);
  }

  openModal() {
    this.setState({showModal: true});
  }

  closeModal() {
    this.setState({showModal: false});
  }

  render() {
    const style= this.state.showModal ? {display: "block"} : {display: "none"};
    return (
      <div>
        <h2>Modal Example</h2>

        {/* <!-- Trigger/Open The Modal --> */}
        <button id="myBtn" onClick={() => this.openModal()}>Open Modal</button>

        {/* <!-- The Modal --> */}
        <div id="myModal" class="modal" style={style}>

          {/* <!-- Modal content --> */}
          <div class="modal-content">
             <span class="close" onClick={() => this.closeModal()}>&times;</span>
             <p>Some text in the Modal..</p>
          </div>

        </div>
      </div>
    );
  }
}

ReactDOM.render(
  <MyModalApp />,
  document.getElementById('root')
);
body {font-family: Arial, Helvetica, sans-serif;}

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}

/* The Close Button */
.close {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="root"></div>

相似文章

db2 - 如何识别是否发出了同步点

我正在开发COBOLcics程序,该程序有多个同步点并在不同的场景中执行。如果此cics任务同步点下的任何时间点发出与否,我想执行一些逻辑。请帮助告知是否有任何方法或关键字可以检查相同的内容。...