从SemanticUI中的Action onClick检索输入值

Question

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

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