Retrieve Input value from Action onClick in SemanticUI

Question

In React Semantic-UI, Input elements can be given a handy action button or icon as shown here:

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

Unfortunately, the documentation is really poor at explaining how the action can trigger a function. The question of how you're meant to do this was asked here:

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

And the answer seems to be that you should use onClick on the icon or button. That would look something like this:

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

While that seems logical, it raises the question how do you access the value of the input, when the data passed to the onClick function describe the icon instead of the input?

Answer 1

The way you are trying to do it, you would need to create a ref for the <Input> component and then from that target get the value. However, a better way to do this would be to control the Input's value in state instead. Then you can have a click handler function that gets the value of the input from state each time your button is clicked.

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

Here's a quick Codesandbox example showing how this would work: https://codesandbox.io/s/y3j4m703ov