如何改变状态？答案

【问题标题】：how to change state?如何改变状态？
【发布时间】：2019-07-23 10:01:59
【问题描述】：

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

如何在handleSubmit - setMessageShown(true);中将状态更改为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>
  );
};

【问题讨论】：

标签： javascript reactjs

【解决方案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>
  );
};

【讨论】：

这种情况下我们不需要使用箭头函数。

【解决方案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>
   );
};

这就是你可以在反应钩子中改变状态的方法。

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

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

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

【讨论】：