我有一个要进行基本验证检查的表单。我想检查除复选框外是否有任何值是空的,但我们可以只从一个验证开始。我以为我可以使用 useState
Hook ,但它总是在第一次提交时将默认值设置为 true(当值已填写时),即使我在输入值已填写时将值设置为 true .
const [nameVal, setNameVal] = useState(false);
const submitForm = async (e) => {
e.preventDefault();
//console.log(e.target.name.value);
if(e.target.name.value === ""){
setNameVal(false);
console.log(nameVal);
}
else{
setNameVal(true);
console.log(nameVal);
}
如何让 console.log(nameVal)
在第一次提交表单时显示 true
和 target.name.value
已填写。目前第一次是false
,之后每次都是true
。所以除了最初的点击之外,一切似乎都像我想要的那样工作。提前致谢
最佳答案
让我们回顾一下如何useState
作品
当你这样做的时候
const [nameVal, setNameVal] = useState(false);
您正在创建一个变量(初始值为 false)和一个函数。这意味着在您的处理程序中(假设您已正确填写一个值)
const submitForm = async (e) => {
e.preventDefault();
if(e.target.name.value === ""){
setNameVal(false);
console.log(nameVal); // --> here it will log true
你会看到记录true
,因为 nameVal
是上面的变量(来自 useState
行)。当你运行 setNameVal(false)
基本上它会继续执行你的代码,一旦完成,它就会触发 React 中的协调算法,这将导致新的渲染。这一次,(第二次),当这条线运行时
const [nameVal, setNameVal] = useState(false);
nameVal
将是真实的。那是因为初始值仅在第一次渲染时使用。并且因为它知道状态的值已经改变,感谢您调用setXXX
更新到新状态的函数
您需要将您的功能组件视为状态和 Prop 的函数,并且您对状态所做的所有更改的每一次更改,您都将在下一个渲染周期中渲染新的输出。所以这意味着 - 每个渲染器都有自己的 Prop 和状态
(不过,这不是我的,请阅读 Dan Abramov 的这篇精彩文章,其中也谈到了 useEffect https://overreacted.io/a-complete-guide-to-useeffect/ )
========================
关于您的问题,如何“切换”某些消息以显示 useState
?一般形式可以是
const [showMessage, setShowMessage] = useState(false)
const someEvent = () => {
// do stuff
if (someCondition) {
setShowMessage(true)
}
}
// more stuff
return (
<div>
{ showMessage && <span>I am a message!</span>}
<Foo onChange={someEvent} />
</div>
)
解释:
- 初始渲染。
showMessage
是假的,所以{ showMessage && <span>I am a message!</span>}
将返回false
(这使得 React 什么都不渲染) - 当某些事件触发我们的函数处理程序时,我们将设置
showMessage
为真。 - 在下一次渲染中(协调算法检测到状态变化并触发新渲染),我们看到
showMessage
为真,所以span
呈现
关于javascript - 如何使用 react Hook useState 在表单上显示/隐藏一些警报,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59385500/