AntD Input.Search禁用输入框时如何保持搜索按钮可用

Ant Design 的 Input.Search 组件默认会将根节点传入的disabled状态同步给内部输入框和搜索按钮，要实现仅禁用输入框、搜索按钮保持可用，有两种成熟方案：

• 单组件属性配置（写法最简）
  不在Search根节点传入disabled，转而通过inputProps属性把禁用规则只透传给内部输入框，不会影响后置按钮的交互状态：

  import { Input } from 'antd';
  const { Search } = Input;
  
  <Search
    enterButton
    placeholder="ID"
    inputProps={{ disabled: true }}
    onSearch={() => console.log('search')}
  />
  

• 手动组合组件（兼容性最优）
  如果你的项目使用的AntD版本存在属性透传异常，可以直接用输入框+按钮手动组合出搜索框样式，两个组件的状态完全独立，不存在连带禁用的问题，也方便后续自定义按钮样式、交互：

  import { Input, Button } from 'antd';
  
  <Input.Group compact>
    <Input placeholder="ID" disabled style={{ width: 'calc(100% - 80px)' }} />
    <Button type="primary" onClick={() => console.log('search')} style={{ width: 80 }}>
      搜索
    </Button>
  </Input.Group>
  

如果需要适配不同尺寸、自定义按钮文案，第二种方案的灵活度更高，不需要额外覆写组件内部样式。

内容的提问来源于stack exchange，提问作者SungHun Jung