Как заменить форму с компонентом после отправки - PullRequest
Новая
       5

Как заменить форму с компонентом после отправки

0 голосов
/ 27 марта 2020

Я всегда не уверен, когда использовать ловушку useEffect в реагировать, есть ли ситуация, когда ее следует использовать?

У меня есть простая форма и я хочу заменить форму сообщением после кнопки отправки щелкнул 

import React from "react";
import "./styles.css";
import SubscribeMessage from "./SubscribeMessage";

export default function App() {
  const subscribeHandeler = e => {
    e.preventDefault();
    return <SubscribeMessage />;
  };

  return (
    <div className="App">
      <h1>Email Subscription</h1>
      <form onSubmit={subscribeHandeler}>
        <div className="subscribeHeader">
          Subscribe to stay tuned for our latest news and updates.
        </div>
        <input
          className="inputEmail"
          type="email"
          placeholder="Email address"
        />
        <button className="subscribeBtn">SIGN UP</button>
      </form>
    </div>
  );
}

Рабочие коды и поле можно найти здесь: https://codesandbox.io/s/little-shadow-8rbdd

Ответы [ 3 ]

1 голос
/ 27 марта 2020

Вы можете сделать что-то вроде этого: 

import React, { useState } from "react";
import "./styles.css";
import SubscribeMessage from "./SubscribeMessage";

export default function App() {
  const [submitted, setSubmitted] = useState(false)

  const subscribeHandeler = e => {
    e.preventDefault();
    setSubmitted(true) 
    // handle subscription logic   
  };

  if (submitted) {
    return <SubscribeMessage />;
  }

  return (
    <div className="App">
      <h1>Email Subscription</h1>
      <form onSubmit={subscribeHandeler}>
        <div className="subscribeHeader">
          Subscribe to stay tuned for our latest news and updates.
        </div>
        <input
          className="inputEmail"
          type="email"
          placeholder="Email address"
        />
        <button className="subscribeBtn">SIGN UP</button>
      </form>
    </div>
  );
}
1 голос
/ 27 марта 2020

Используйте флаг, который будет переключаться в зависимости от вашего представления. И пока вы рендерите его, визуализируйте его условно на основе флага 

import React, { useState } from "react";
import "./styles.css";
import SubscribeMessage from "./SubscribeMessage";

export default function App() {
  const [submit, setSubmit] = useState(false);

  const subscribeHandeler = e => {
    e.preventDefault();
    setSubmit(!submit);
  };

  return (
    <div className="App">
      <h1>Email Subscription</h1>
      {!submit ? (
        <form onSubmit={subscribeHandeler}>
          <div className="subscribeHeader">
            Subscribe to stay tuned for our latest news and updates.
          </div>
          <input
            className="inputEmail"
            type="email"
            placeholder="Email address"
          />
          <button className="subscribeBtn">SIGN UP</button>
        </form>
      ) : (
        <SubscribeMessage />
      )}
    </div>
  );
}
1 голос
/ 27 марта 2020

Вы можете добавить show состояние и обновить это состояние на subscribeHandeler для отображения компонента 

import React, { useState } from "react";
import "./styles.css";
import SubscribeMessage from "./SubscribeMessage";

export default function App() {
  const [show, setShow] = useState(false);
  const subscribeHandeler = e => {
    e.preventDefault();
    setShow(!show);
  };

  return (
    <div className="App">
      <h1>Email Subscription</h1>
      {!show && (
        <form onSubmit={subscribeHandeler}>
          <div className="subscribeHeader">
            Subscribe to stay tuned for our latest news and updates.
          </div>
          <input
            className="inputEmail"
            type="email"
            placeholder="Email address"
          />
          <button className="subscribeBtn">SIGN UP</button>
        </form>
      )}
      {show && <SubscribeMessage />}
    </div>
  );
}

Вы можете проверить здесь CodeSandBox

...