React/NextJS中实现点击按钮控制input输入框启用/禁用的方法

需求 #

点击按钮后启用原本禁用的文本输入框，支持编辑输入框内的文本，效果如下：

现有代码 #

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;

实现方法 #

用React内置的useState管理两个核心状态即可：

• 输入框的禁用状态，初始值为true（默认禁用）
• 输入框的内容值，用于受控绑定实现文本编辑
  给按钮绑定点击事件，点击时切换禁用状态即可。完整代码：

import { useState } from 'react';

function App() {
  // 控制输入框禁用/启用状态
  const [isDisabled, setIsDisabled] = useState(true);
  // 绑定输入框内容
  const [urlValue, setUrlValue] = useState('');

  return (
    <div className="App">
      <label>URL : </label>
      <input
        placeholder='http://localhost:3000/123456'
        disabled={isDisabled}
        value={urlValue}
        onChange={e => setUrlValue(e.target.value)}
      />
      <button 
        type="button" 
        onClick={() => setIsDisabled(prev => !prev)}
      >
        {isDisabled ? 'Active' : 'Lock'}
      </button>
    </div>
  );
}

export default App;

补充说明 #

• 原代码里直接给input写死了disabled属性，属性值永远为真，所以必须把这个属性和状态变量绑定，才能实现动态切换
• 按钮的type建议从submit改成button，如果后续组件放在表单内，不会误触发表单默认提交行为
• 如果需要输入框默认填充内容，直接给urlValue的useState传入初始值即可，比如useState('http://localhost:3000/123456')
• 如果需要点击激活后自动聚焦输入框，可以给input加ref，在禁用状态变为false时调用ref的focus()方法即可

内容的提问来源于stack exchange，提问作者Kia Kalista