无法使用 plotly dash 回调更改输入组件

Question

我认为在使用回调更改输入文本时可能会出现问题。

这是一个显示问题的示例脚本。

import dash
import dash_html_components as html
import dash_core_components as dcc

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)
app.layout = html.Div([
    dcc.Input(
        id='an_input',
        value='Nothing done yet!',
        type='text'),
    dcc.Dropdown(
        id='my-dropdown',
        options=[
            {'label': 'New York City', 'value': 'NYC'},
            {'label': 'Montreal', 'value': 'MTL'},
            {'label': 'San Francisco', 'value': 'SF'}
        ],
        value='NYC'
    ),
    html.Div(id='output-container')
])

@app.callback(
    dash.dependencies.Output('an_input', 'value'),
    [dash.dependencies.Input('my-dropdown', 'value')])
def update_input_component(value):
    print('Trying to change input value')
    return 'You have selected "{}"'.format(value)


@app.callback(
    dash.dependencies.Output('output-container', 'children'),
    [dash.dependencies.Input('my-dropdown', 'value')])
def update_output(value):
    return 'You have selected "{}"'.format(value)


if __name__ == '__main__':
    app.run_server(debug=True)

当我更改下拉菜单时，我希望输入文本会更新，但事实并非如此！

Answer 1

问题是您正在为输出使用输入组件。您可以在这里做两件事。您可以更新dcc.Input 组件的placeholder 值，也可以将其更改为其他值，例如html.P 或html.Div 以保留您的输出。我更喜欢第二个，因为看起来该组件在您的布局中的目的只是保存下拉列表的输出，而不是充当输入。这是一个工作示例。

import dash
import dash_html_components as html
import dash_core_components as dcc

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)
app.layout = html.Div([
    html.Div(
        id='text-output',
        children='Your text here'),
    dcc.Dropdown(
        id='my-dropdown',
        options=[
            {'label': 'New York City', 'value': 'NYC'},
            {'label': 'Montreal', 'value': 'MTL'},
            {'label': 'San Francisco', 'value': 'SF'}
        ],
        value='NYC'
    ),
    html.Div(id='output-container')
])

@app.callback(
    dash.dependencies.Output('text-output', 'children'),
    [dash.dependencies.Input('my-dropdown', 'value')])
def update_input_component(value):
    print('Trying to change input value')
    return 'You have selected "{}"'.format(value)


@app.callback(
    dash.dependencies.Output('output-container', 'children'),
    [dash.dependencies.Input('my-dropdown', 'value')])
def update_output(value):
    return 'You have selected "{}"'.format(value)


if __name__ == '__main__':
    app.run_server(debug=True)

如果你真的想使用dcc.Input，那么你可以像这样更改代码。输入：

dcc.Input(
        id='an_input',
        value='',
        placeholder='Enter text...',
        type='text'),

并使回调的输出如下： dash.dependencies.Output('an_input', 'placeholder'),