javascript - 如何在 react 中消失 "button"元素？

Question

    import React, { useState } from "react";
    import "./index.scss";

    export const LotteryForm = () => {
      const [text, setText] = useState("Enter your email address");

      function isSubmit() {
        setText("Thank you!" + `  ${email}`);
        // const btnEl = document.getElementsByName("button");
        // btnEl.style.display = "none";
      }


      return (
        <div>
          <button className="lottery__submit submit" 
            onClick={() => { isSubmit() }}>
            Submit email
          </button>
        </div>
      );
    };

你好。我目前正在学习 React(今天是第二天......)。我在这里想做的是，当用户点击按钮提交其电子邮件地址时，消失按钮元素并仅显示“谢谢”和提交的电子邮件地址。我尝试选择一个按钮元素并将其显示属性更改为“无”，但它不起作用。谁能告诉我如何在提交后消失按钮元素？

Answer 1

您可以使用状态来跟踪表单的提交状态和 conditional rendering仅在未提交时呈现按钮:

import React, { useState } from "react";
import "./index.scss";

export const LotteryForm = () => {
  const [text, setText] = useState("Enter your email address");
  const [isSubmitted, setIsSubmitted] = useState(false);

  function isSubmit() {
    setText("Thank you!" + `  ${email}`);
    setIsSubmitted(true);
  }


  return (
    <div>
      {!isSubmitted && 
        <button
          className="lottery__submit submit"
          onClick={isSubmit()}
        >
          Submit email
        </button>
      }
    </div>
  );
};

这是一个example行动中。

避免使用 DOM 操作来操作元素。

希望有帮助!