Question

我有一个表单，当我单击按钮时，我必须显示消息。消息具有两种状态- setMessageShown（true）; 和 setMessageShown（true）;

如何在 handleSubmit 中将状态更改为 true - setMessageShown（true）; ？

const handleSubmit = e => {
  e.preventDefault();
  // ...
};

const ReviewPopup = ({ name }) => {
  const [messageShown, setMessageShown] = useState(false);
  const hideMessage = () => {
    setMessageShown(false);
  };

  return (
    <form onSubmit={handleSubmit} className="new_review" id="new_review" action="/reviews" acceptCharset="UTF-8" method="post">
    // ...
    </form>
  );
};

Answer 1

将handleSubmit放在组件内部。

const ReviewPopup = ({ name }) => {
  const [messageShown, setMessageShown] = useState(false);
  const hideMessage = () => {
    setMessageShown(false);
  };

  function handleSubmit(e) {
    e.preventDefault();
    setMessageShown(true);
  }

  return (
    <form onSubmit={handleSubmit} className="new_review" id="new_review" action="/reviews" acceptCharset="UTF-8" method="post">
    // ...
    </form>
  );
};

Answer 2

尝试这种方式：

const ReviewPopup = ({ name }) => {
    const [messageShown, setMessageShown] = useState(false);

    const hideMessage = () => {
        setMessageShown(false);
    };

    const handleSubmit = () => {
        setMessageShown(true)
    }

    return (
        <form onSubmit={handleSubmit} className="new_review" id="new_review" action="/reviews" acceptCharset="UTF-8" method="post">
        // ...
        </form>
   );
};

这是您可以在react hooks中更改状态的方法。

在这里，您使用useState分配状态变量，并声明一种可以更改状态变量的方法

const [messageShown, setMessageShown] = useState(false);

这里messageShown是状态变量，而setMessageShown是可以用来更改状态变量的方法。这就是您在此行中声明的内容。 useState(false)表示状态变量messageShown的初始值。

如何改变状态？

2 个答案: