[英]Enable Disable input with button in reactJS / nextJS
I have a condition like this.我有这样的条件。 I want to enable text input if the button is pressed and can edit the text in it.
如果按下按钮并可以编辑其中的文本,我想启用文本输入。 the question is how to make the function in react js?
问题是如何在 react js 中制作函数?
my Code:我的代码:
function App() {
return (
<div className="App">
<label>URL : </label>
<input
placeholder='http://localhost:3000/123456'
disabled
/>
<button type='submit'>Active</button>
</div>
);
}
export default App;
Use useState
hook and onClick
event like in this example .像本例一样使用
useState
钩子和onClick
事件。
import React, { useState } from "react";
function App() {
const [active, setActive] = useState(false)
return (
<div className="App">
<label>URL : </label>
<input
placeholder='http://localhost:3000/123456'
disabled={!active}
/>
<button
type='submit'
onClick={() => setActive(!active)}
>
Active
</button>
</div>
);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.