Как я могу пропустить элемент "кнопка" в реакции?

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 (это день2 ...). Здесь я хочу, чтобы пользователь нажимал кнопку, чтобы отправить свой адрес электронной почты, исчезал элемент кнопки и отображал только «Спасибо» с указанным адресом электронной почты. Я попытался выбрать элемент кнопки и изменил его свойство display на «none», но это не сработало. Кто-нибудь может подсказать, как можно пропустить элемент кнопки после отправки?

Answer 1

Вы можете использовать состояние для отслеживания отправленного статуса формы и условного рендеринга только для рендеринга кнопки, когда она не была отправлена:

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

Вот пример в действии.

Избегайте использования DOM-манипуляций для манипулирования элементами.

Надеюсь, это поможет!

Answer 2

Я думаю, лучше всего было бы сделать снимок, если кнопка видна, используя состояние (это состояние, есть кнопка или нет) ...

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

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

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


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

Answer 3

Вы можете установить стиль элемента jsx с помощью style={}

function example() {
  let buttonStyle = {};
  if (/*hidden*/) {
    buttonStyle.display = "hidden";
  }


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

Answer 4

Вы можете определить идентификатор для кнопки:

<button id="submitButton" ... />

, тогда вы делаете то же самое, что и вы

const btnEl = document.getElementById("submitButton");
btnEl.style.display = "none";