如何在Semantic UI React中为输入框添加选择器附加组件？

没问题！Semantic UI React的Input组件本身就支持轻松实现右侧附加元素的效果，不管是按钮、图标还是自定义组件都能搞定，下面给你几种实用的实现方式：

1. 按钮类附加组件（用action属性） #

如果你的附加组件是可点击的按钮（比如提交按钮），直接用action属性就可以，默认会自动放在输入框右侧：

import { Input, Button } from 'semantic-ui-react';

const InputWithRightButton = () => (
  <Input
    placeholder="请输入内容"
    action={<Button type="submit">提交</Button>}
  />
);

export default InputWithRightButton;

2. 图标/文本类附加组件（用addon+position属性） #

要是你想加图标、文本这类非交互元素，用addon属性配合position="right"就能指定附加元素在右侧：

import { Input, Icon } from 'semantic-ui-react';

const InputWithRightIcon = () => (
  <Input
    placeholder="请输入内容"
    addon={<Icon name="search" />}
    position="right"
  />
);

export default InputWithRightIcon;

3. 自定义复杂附加组件（用Input.Group） #

如果你的附加组件是自定义的复杂元素（比如带样式的文本标签），可以用Input.Group来组合输入框和附加元素，灵活性更高：

import { Input, Label } from 'semantic-ui-react';

const InputWithCustomAddon = () => (
  <Input.Group>
    <Input placeholder="请输入内容" />
    <Label basic>.com</Label>
  </Input.Group>
);

export default InputWithCustomAddon;

这几种方式都能完美实现你想要的右侧附加组件效果，你可以根据自己的业务场景选择对应的写法~

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