Question

在React Semantic-UI中，可以为输入元素提供方便的操作按钮或图标，如下所示：

http://react.semantic-ui.com/elements/input/#variations-action-icon-button

不幸的是，该文档在解释动作如何触发功能方面的能力很差。在这里提出了有关如何执行此操作的问题：

https://github.com/Semantic-Org/Semantic-UI-React/issues/1944

答案似乎是您应该在图标或按钮上使用onClick。看起来像这样：

<Input
    action={{
        icon: 'play', onClick: (event,data)=>{console.log(data);}
    }}
    defaultValue="I bet you wish you could access this!"
/>

虽然看起来合乎逻辑，但却提出了一个问题：当传递给onClick函数的数据描述的是图标而不是输入时，如何访问输入的值？

Answer 1

您尝试执行此操作的方式，您需要为<Input>组件创建一个引用，然后从该目标获取值。但是，执行此操作的更好方法是改为控制输入的状态值。然后，您可以拥有一个点击处理程序功能，该功能可以在每次单击按钮时从状态获取输入的值。

<Input
  action={{
    icon: "play",
    onClick: () => this.handleClick()
  }}
  defaultValue={this.state.value}
  onChange={this.handleInputChange}
/>

下面是一个快速的Codesandbox示例，显示了其工作方式：https://codesandbox.io/s/y3j4m703ov

从SemanticUI中的Action onClick检索输入值

1 个答案: