在 reactJS nextJS 中使用按钮启用禁用输入

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;

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>
  );
}

Reactjs相关问答推荐

如何实现黑暗模式 map ？

Inbox Enum类型以React组件状态时出现TypScript错误

使用Thattle和Use Effect setTimeout进行搜索有什么不同

如何在取数后添加新数据，并在页面上保存旧数据？

在下一个js中使用ESTAccountWithEmailAndPassword函数时循环

Next.js：提交表单时状态尚未就绪

为什么我的react虚拟化列表不显示滚动条，除非我确保高度低于rowCount*rowHeight？

使用`Link`包装`tr`标记会在Next.js中产生水合错误14

Reaction-路由-DOM v6与v5

根据用户 Select 的注册类型更改表单字段

点击页脚链接时，如何更改ReactJS导航栏中的活动菜单项(样式为Tailwind CSS)？

我发送的 prop 的值不会改变.如果成功登录，导航栏中的 prop 必须为 true.我从后端得到 200 ok

REACT： UseState 没有更新变量(ant design 模态形式)

ReactJS on AWS Amplify与EC2上的Spring boot服务之间的混合内容错误

RTK 查询Mutations 在 StrictMode 中执行两次

Reactjs 表单未反映提交时的更改

更新和删除功能不工作 Asp.net MVC React

在 redux 工具包中使用 dispatch 发送多个操作

交换键仍然引入了 fresh 的 DOM 元素

你如何使用 refs 访问 React 中映射子项的值？