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

Question

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

这在semantic-ui-react中可能吗？

谢谢你

Answer 1

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

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

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

Answer 2

（已更新） 要清除该字段，据我所知，没有“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 3

从 Semantic UI React 0.83.0 开始，可以使用

clearable

通过下拉菜单来完成此操作。您无法使用此方法将自己的事件处理程序添加到“x”。单击“x”将简单地清除所选值并使用新的空值调用 onChange。

他们文档中的示例：

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

请参阅其文档页面上的示例输出此处

Answer 4

这就是我如何在“searchFilter”状态不为空时显示“x”图标。

我必须在图标上放置一个“margin-right”以将其移离其他图标，并添加“link”道具以使其可点击：

import React, { useState } from "react";
import { Icon, Input } from "semantic-ui-react";

const InputWithTwoIcons = () => {
  const [searchFilter, setSearchFilter] = useState("");

  return (
    <Input
      icon={
        <>
          {searchFilter ? (
            <Icon
              name="delete"
              link
              onClick={() => {
                setSearchFilter("");
              }}
              style={{ marginRight: "1.5rem" }}
            />
          ) : null}
          <Icon name="search" color="grey" />
        </>
      }
      placeholder="Search..."
      value={searchFilter}
      onChange={(e) => {
        setSearchFilter(e.target.value);
      }}
    />
  );
};

export default InputWithTwoIcons;