dash回调遇到的问题

Question

你好，请问可以提问一下用dash进行网页开发时遇到的疑问吗？
就是如果同时需要用drop down和bottom进行控制同一个，然后在这两个选择里，根据最近一次的变量修改对output进行回调，要怎么表达出来。
（就比如，drop down和bottom的选项都是苹果，梨，桃子，然后先点击dropdown里的苹果，再点击bottom的桃子，要求先后输出苹果，桃子）

Answer 1

该回答引用ChatGPT

当您需要使用 Dropdown 和 Button 控制同一个输出时，您可以使用 dcc.Store 来存储您的变量，并在用户更改任一控件时更新它。然后，您可以使用 Input 组件和一个或多个 State 组件来实现您的回调函数，以根据最近的变量更改更新您的输出。

以下是一个示例代码，展示了如何实现您所描述的行为：

import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output, State

app = dash.Dash(__name__)

app.layout = html.Div([
    dcc.Store(id='fruit-storage', data=''),
    dcc.Dropdown(
        id='fruit-dropdown',
        options=[
            {'label': 'Apple', 'value': 'apple'},
            {'label': 'Pear', 'value': 'pear'},
            {'label': 'Peach', 'value': 'peach'}
        ],
        placeholder='Select a fruit'
    ),
    html.Button('Submit', id='submit-button', n_clicks=0),
    html.Div(id='output')
])

@app.callback(
    Output('fruit-storage', 'data'),
    Input('submit-button', 'n_clicks'),
    State('fruit-dropdown', 'value'),
    State('fruit-storage', 'data')
)
def update_fruit_data(n_clicks, dropdown_value, stored_data):
    if n_clicks > 0:
        return dropdown_value
    return stored_data

@app.callback(
    Output('output', 'children'),
    Input('fruit-dropdown', 'value'),
    Input('submit-button', 'n_clicks'),
    State('fruit-storage', 'data')
)
def update_output(dropdown_value, n_clicks, stored_data):
    if n_clicks == 0:
        return ''
    if stored_data == '':
        return ''
    return f'{stored_data}, {dropdown_value}'

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

在这个示例代码中，fruit-storage 存储了最近一次点击按钮之前选择的水果，fruit-dropdown 是一个下拉菜单，允许用户选择一个水果，submit-button 是一个按钮，当用户点击它时，会将最近的选择保存到 fruit-storage 中。output 是一个用于显示最近两个选择的 div 元素。