reactjs - 在 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

像在这个 example 中一样使用 useState 钩子(Hook)和 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>
  );
}