react点击按钮弹出文本框
时间: 2023-09-11 13:09:08 浏览: 65
你可以使用React的useState钩子来控制文本框的显示和隐藏。以下是一个简单的示例代码:
```jsx
import React, { useState } from "react";
function App() {
const [showInput, setShowInput] = useState(false);
const handleClick = () => {
setShowInput(true);
};
const handleBlur = () => {
setShowInput(false);
};
return (
<div>
<button onClick={handleClick}>点击弹出文本框</button>
{showInput && (
<input type="text" onBlur={handleBlur} />
)}
</div>
);
}
export default App;
```
在上面的代码中,我们使用useState钩子来创建一个名为showInput的状态变量和一个名为setShowInput的更新函数。showInput状态变量初始值为false,表示文本框默认是隐藏的。当用户点击按钮时,我们调用handleClick函数来将showInput状态变量设置为true,从而显示文本框。当用户点击文本框以外的区域时,我们调用handleBlur函数来将showInput状态变量设置为false,从而隐藏文本框。最后,我们使用showInput状态变量来控制文本框的显示和隐藏。
阅读全文
相关推荐
点击文本框中按钮弹出日期
<input name="text" type="text" class="Input" id=showdate />
<input name="image" type="image" id=controlcalendar onclick="javascript:document.getElementById('caltable').style.display='';" value="日历" src="images/rq.gif" />
3 <input name="year" id="year" type="text" size="4" maxlength="4" onKeyDown="if (event.keyCode==13){setDate()}" onKeyUp="this.value=this.value.replace(/[^0-9]/g,'')" onpaste="this.value=this.value.replace(/[^0-9]/g,'')"> 年 <input name="month" id="month" type="text" size="1" maxlength="2" onKeyDown="if (event.keyCode==13){setDate()}" onKeyUp="this.value=this.value.replace(/[^0-9]/g,'')" onpaste="this.value=this.value.replace(/[^0-9]/g,'')"> 月 4
<Script LANGUAGE="JavaScript">
document.write("" + days[0] + " ");
for (var intLoop = 1; intLoop < days.length-1;intLoop++)
document.write("" + days[intLoop] + " ");
document.write("" + days[intLoop] + " ");
</Script>
<Script LANGUAGE="JavaScript">
for (var intWeeks = 0; intWeeks < 6; intWeeks++)
{
document.write("");
for (var intDays = 0; intDays < days.length;intDays++) document.write(" ");
document.write(" ");
}
</Script>