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

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

问题是你正在为输出使用输入组件。你可以在这做两件事。您可以更新placeholder组件的dcc.Input值，或者您可以将其更改为其他内容，例如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'),