Question

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

这可能是语义 - 反应吗？

谢谢

Answer 1

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

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

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

Answer 2

（更新）为了清除这个领域，据我所知，没有“语义 - 反应”的捷径。

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

这是一个例子：

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所需。{/ p>

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

Answer 3

从语义UI React 0.83.0开始，可以使用conda install -c conda-forge pdfminer.six通过Dropdowns进行此操作。您不能使用此事件处理程序添加到“ x”。单击“ x”将简单地清除所选值，并使用新的空值调用onChange。

他们的文档示例：

clearable

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

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

3 个答案: