如何在react for if语句中使用setTimeout

Question

我喜欢在输入/表单中只使用不带标签的占位符。因此，我创建了一个onClick->设置从文本到日期的类型。但如果有人记性不好，不知道该填写什么日期，我会创建一个onMouseleave->将类型从日期设置为文本(如果为空(。但如果有人想庆祝他的生日，而老鼠很快就离开了，他们会给我发短信而不是日期。因此，我想使用setTmeout，但它没有按计划工作。

const [type, setType] = useState("text")
const handleDate = () => {
setType("date")
} 
const handleText = () =>{  
if(values.birthday === ""){
setType("text")}
}

<input  
onChange={handleChange}
value={values.birthday}
type={type}
name="birthday"
placeholder="birthday"
onClick={handleDate}
onMouseLeave={setTimeout(handleText, 3000)}/>

通过使用onMouseLeave={setTimeout(handleText, 3000)}/>，输入字段被取消选择，我不能在中键入任何内容

我希望在3秒钟后检查if查询，并能够在中键入一些内容

Answer 1

试试这个：

<input  
onChange={handleChange}
value={values.birthday}
type={type}
name="birthday"
placeholder="birthday"
onClick={handleDate}
onMouseLeave={() => setTimeout(handleText, 3000)}/> 

你目前的做法是在渲染时立即调用setTimeout，你需要把它作为一个函数

Answer 2

这是一个非常奇怪的用户体验设计，我怀疑你的用户会喜欢它。没有人会想到几秒钟后将鼠标从输入中移出会替换输入的内容。你有没有考虑过人们可能会使用触摸屏？或者使用Tab键移动到下一个输入？

如果你不想要标签，那么使用更传统的用户体验，比如title，怎么样？