在 Semantic-UI-React 中，有没有办法将 x 图标添加到文本输入或下拉列表中，以便在单击时清除文本？

Question

我有一个文本输入和一个允许添加的下拉菜单（都使用 Form.xxx 版本）。对于这两个，我想在右侧添加一个 x 图标，单击该图标时，将调用处理程序或清除输入的值。

这在语义-ui-反应中可能吗？

谢谢

Answer 1

（更新）要清除字段，据我所知没有"semantic-ui-react"快捷方式。

但是，您可以使用组件状态手动执行此操作。

这是一个例子：

class ExampleClearField extends Component {
  state = {}

  handleChange = (e, { name, value }) => this.setState({ [name]: value })

  handleClear = () => this.setState({ email: ''})

  render() {
    const { email } = this.state

    return (
     <Form.Input iconPosition='left' name="email />
        <Icon name='x' link onClick={this.handleClear} />
        <input/>
     </Form.Input>

    )
  }
 }

** 注意 link，这是 Icon 接受 onClick 所必需的。

此外，不要忘记（您可能需要根据 iconPostion 更改它的位置）

Answer 2

我确实找到了一个解决方案，我将分享它，但这意味着我不能再在左侧显示我的锁定图标，因为一个输入只能有一个图标。

我所做的是使用 Icon 元素，并向其添加一个 onClick 处理程序，如下所示：

<Input ...
  icon={<Icon name='delete' link onClick={this.handleDeleteClick}/>}/>

Answer 3

从 Semantic UI React 0.83.0 开始，可以使用 clearable 通过下拉列表来做到这一点。您不能使用此方法将自己的事件处理程序添加到 "x"。单击 "x" 将简单地清除所选值并使用新的空值调用 onChange。

他们文档中的示例：

const DropdownExampleClearable = () => <Dropdown clearable options={options} selection />

查看其文档页面上的示例输出 here

在 Semantic-UI-React 中，有没有办法将 x 图标添加到文本输入或下拉列表中，以便在单击时清除文本？

In Semantic-UI-React, is there a way to add an x icon to a text input or dropdown that will clear the text when clicked?

semantic-ui-react