React表单提交后无法显示输入变量问题求助

我是React新手，正在开发一个获取表单输入并在div中显示的应用。目前已通过useState()方法获取到表单输入值，但尝试创建普通变量isSubmitted来跟踪提交状态，希望仅在用户提交后显示输入的邮箱。

以下是我的代码：

const Example0 = () => {
  var isSubmitted;
  const [email, setEmail] = useState("");

  const handleEmail = (event) => {
    setEmail(event.target.value);
    isSubmitted = false;
    console.log(isSubmitted);
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    isSubmitted = true;
    console.log(isSubmitted);
  };

  return (
    <Fragment>
      <h1>Form example</h1>
      <form onSubmit={handleSubmit}>
        <div>
          <label htmlFor="email">Email</label>
          <input id="email" type="text" value={email} onChange={handleEmail} />
        </div>
        <button type="submit">Submit</button>
      </form>
      <div>{isSubmitted ? email : "no user"}</div>
    </Fragment>
  );
};

但这段代码无法正常工作：邮箱变量已变化，但视图中的内容并未更新。我有HTML开发背景，怀疑这和React的工作机制有关，恳请帮助。

你用普通变量isSubmitted跟踪提交状态是行不通的——React组件只有当状态（state）或属性（props）发生变化时，才会触发重新渲染，更新视图。普通变量的改变不会通知React去重新渲染组件，所以就算你修改了isSubmitted的值，视图也不会跟着更新。

只需要把isSubmitted改成React状态即可解决问题，修改后的代码如下：

import { useState, Fragment } from 'react';

const Example0 = () => {
  // 用useState定义提交状态，初始值为false
  const [isSubmitted, setIsSubmitted] = useState(false);
  const [email, setEmail] = useState("");

  const handleEmail = (event) => {
    setEmail(event.target.value);
    // 更新状态而非直接赋值
    setIsSubmitted(false);
    console.log(isSubmitted);
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    // 更新状态而非直接赋值
    setIsSubmitted(true);
    console.log(isSubmitted);
  };

  return (
    <Fragment>
      <h1>Form example</h1>
      <form onSubmit={handleSubmit}>
        <div>
          <label htmlFor="email">Email</label>
          <input id="email" type="text" value={email} onChange={handleEmail} />
        </div>
        <button type="submit">Submit</button>
      </form>
      <div>{isSubmitted ? email : "no user"}</div>
    </Fragment>
  );
};

关键修改点： #

• 用useState(false)替代普通变量var isSubmitted，将提交状态纳入React的状态管理
• 修改状态时使用setIsSubmitted方法，而非直接赋值。调用这个方法会通知React状态已变更，触发组件重新渲染，视图也就会跟着更新了

内容的提问来源于stack exchange，提问作者ati