Блог

У меня есть домашняя страница, где они могут нажать модальную кнопку. после нажатия кнопки появится модальный. затем в модальном режиме они введут текст, и когда они нажмут «Отправить», введенный ими текст должен отображаться на главной странице. В настоящее время тот, который я сделал, не отображается на главной странице при нажатии кнопки «Отправить». Пожалуйста, помогите. Спасибо

Это и есть код:

https://codesandbox.io/s/competent-rgb-lk4ws

Модальный

В вашем модальном компоненте вы можете создать событие при нажатии кнопки Отправить:

 import React from "react";
import "./modal.css";

// Create new event: onSubmitClick
function Modal({ setOpenModal, onSubmitClick }) {
  // It`s function get name value and pass to onSubmitClick
  function getData() {
    const nameValue = document.getElementById("name").value;
    onSubmitClick(nameValue);
    setOpenModal(false);
  }

  return (
    <div className="modalBackground">
      <div className="modalContainer">
        <div className="titleCloseBtn">
          <button
            onClick={() => {
              setOpenModal(false);
            }}
          >
            X
          </button>
        </div>
        <div className="title">Forms</div>
        <div className="body">
          <input id="name" placeholder="Enter Your Name" />
        </div>
        <div className="footer">
          <button
            onClick={() => {
              setOpenModal(false);
            }}
            id="cancelBtn"
          >
            Cancel
          </button>
          {/* The onclick should be onClick */}
          <button onClick={getData}>Submit</button>
        </div>
      </div>
    </div>
  );
}

export default Modal;
 

Главная

На домашней странице вы можете получить событие и использовать новое значение имени

 import React, { useState } from "react";
import Modal from "../../src/components/Modal/modal.js";
const Home = () => {
  const [modalOpen, setModalOpen] = useState(false);
  const [name, setName] = useState("");

  function handleModalSubmitClick(nameValue) {
    // Receive new value, and set in a state
    setName(nameValue);
  }

  return (
    <div class="hello">
      <h1>Hey, click on the button to open the modal.</h1>
      <span>name: {name}</span>
      <button
        onClick={() => {
          setModalOpen(true);
        }}
        class="button is-pulled-right"
      >
        Button
      </button>
      {modalOpen amp;amp; (
        <Modal
          setOpenModal={setModalOpen}
          onSubmitClick={handleModalSubmitClick} // Bind a function to handle a event
        />
      )}
    </div>
  );
};

export default Home;