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

Question

我有这样的条件。我想在按下按钮时启用文本输入，并且可以编辑其中的文本。问题是如何在react js中实现该功能？

我的代码：

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;

Answer 1

像本例一样使用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>
  );
}