javascript - React JS 提交时删除输入字段并仅显示 "Thank You"

Question

我的代码有 3 个输入字段，即 名字、姓氏、电子邮件 和 1 个 useState 来保存其值，我想在点击 后删除包含所有输入字段的 div 部分>注册并仅显示谢谢

我的代码有 3 个输入字段，即 名字、姓氏、电子邮件 和 1 个 useState 来保存其值，我想在点击 后删除包含所有输入字段的 div 部分>注册并仅显示谢谢

注册之前

注册后

const Home = () => {
  const [saveInput, setInput] = useState({
    fname: '',
    lname: '',
    email: '',
  });
  const [message, setMessage] = useState('enter email');

  const inputFields = (event) => {
    const { value, name } = event.target;
    setInput((preValue) => ({
      ...preValue,
      [name]: value,
    }));
  };

  const onSubmits = (event) => {
    setMessage('thanks');
  };
  return (
    <div className="homeMain">
      <div className="row">
        <img
          className="home_img"
          src="https://i.pinimg.com/originals/53/b5/d7/53b5d70023efa05ec6797b25df413b73.jpg"
        />
        <h1 className="home_h1 text-center">Maryam's Restaurant</h1>
        <Link
          style={{
            color: 'white',
            textDecoration: 'inherit',
            textAlign: 'center',
          }}
          to="/Restaurant"
          className="home_button"
        >
          View Menu
        </Link>
        <h2 className="home_h2 text-center">
          Binging with Babish is a cooking show dedicated to discovering what
          the delectable (and occasionally horrible) foods from fiction actually
          taste like.
        </h2>

        {receipeList.map((curElem) => (
          <div className="home2Main">
            <img className="home_img2" src={curElem.img} />
            <p className="home2Mainp1">{curElem.h1}</p>
            <p className="home2Mainp2">{curElem.date}</p>
          </div>
        ))}
      </div>

      <homeMainDetails />
      <div className="home4Main">
        <h4>
          <bold>Subscribe</bold>
          <br />
          <small>
            Sign up with your email address to receive news and updates.
          </small>
        </h4>
        <input
          className="home4MainInput"
          name="fname"
          onChange={inputFields}
          value={saveInput.fname}
          type="text"
          placeholder="First Name"
        />
        <input
          className="home4MainInput"
          name="lname"
          onChange={inputFields}
          value={saveInput.lname}
          type="text"
          placeholder="Last Name"
        />
        <input
          className="home4MainInput"
          name="email"
          onChange={inputFields}
          value={saveInput.email}
          type="text"
          placeholder="Email Address"
        />
        <button onClick={onSubmits}>Sign Up</button>
        <h4 className="home4Mainh4">
          <small>{message}</small>
        </h4>
      </div>
    </div>
  );
};
export default Home;

Answer 1

您可以使用其他状态来指示您的提交状态。

这样您就可以保存状态值而不影响消息状态:

• 使用其他状态:

const [isSubmited, setIsSubmited] = useState(false);

• 提交时更改该状态:

const onSubmits = (event) => {
    setMessage('thanks');
    setIsSubmited(true);
  };

• 然后有条件地渲染它:

{isSubmited ? (
        <div className="home4Main">
          ...
        </div>
      ) : message}