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'),

无法使用plot破折号回调更改输入组件

1 个答案: