Can I read the value from an Input component?


#1

Title pretty much says it -can I read the value, or do I have to trap and record every time it changes?


#2

You can either have a callback that listens for changes to a dcc.Input components value property using an Input, which will trigger as soon you add text to the field:

@app.callback(Output('output-element','children'), [Input('input-element', 'value')])
def callback(input_value):
    return input_value

Or you can have a callback that responds to a click event somewhere (such as a button), and reads the value of your dcc.Input component as a State:

@app.callback(Output('output-element','children' ), [], [State('input-element', 'value'], [Event('button-element', 'click'])
def callback(input_value):
    return input_value

In either case you only have to define the callback once. The first will fire on every change you make as you type; the second will only fire when you click the button.


#3

Thanks - this is helpful. Are these additional fields of the Ouput decorator documented or explained anywhere? I can see the calling signatures via help on callbacks, but can’t seem to find anything explanatory elsewhere.

In your sample you return the value from the callback. I assume this is notional since the callback is called from within the system code and the return is not visible to me as a user. I assume that if I want access to the value in my code I will need to set a global var from within the callback.


#4

See http://plot.ly/dash/getting-started-part-2 for info in Input and Output and https://plot.ly/dash/state for info on State


#5

Thanks - that explains State. How about docs for Event and in particular what events are associated with each component?


#6

There is currently only click events. I think any component that results in a clickable element in the DOM can be targeted for click events.