reactjs - 从 SemanticUI 中的 onClick 操作中检索输入值

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