提交后如何用组件替换表单

Question

我总是不确定什么时候在 React 中使用 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

Answer 1

您可以添加 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

Answer 2

你可以这样做：

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>
  );
}

Answer 3

使用将根据您的提交进行切换的标志。在渲染它的同时，根据标志

有条件地渲染它

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>
  );
}

提交后如何用组件替换表单

How to replace a form with a component after submit

reactjs

react-functional-component