代码之家  ›  专栏  ›  技术社区  ›  kms

Dash:根据所选的单选选项动态更新元素

  •  0
  • kms  · 技术社区  · 4 年前

    我的dash应用程序中有一个radio元素和一个文本框元素。我想根据回调中选择的选项更新字段中的文本。

    
    dbc.InputGroup(
                        [
    
                           dbc.RadioItems(
                                          id="type",
                                          persistence=True,
                                          persistence_type="memory",
                                          options=[
                                            {"label": "option1", "value": "option1"},
                                            {"label": "option2", "value": "option2"}
                                            ],
                                            value="option1",
                                            style={"margin-left":"8px"}
                           ),
    
                     ],
                     style={"margin-top":"20px","width": "80%", "float": "left"},
                    ),
    
    
    
    dbc.InputGroup(
                       [
    
                   
    
                           dbc.InputGroupAddon("Floor", style={"margin-left":"8px"}),
                           dbc.Input(
                                     id="floor",
                                     persistence=True,
                                     persistence_type="memory"
                                    ),
    
                       ],
                      
    ),
    
    

    如何根据收音机中选择的选项使文本“地板”动态?

    0 回复  |  直到 4 年前
        1
  •  0
  •   J. Doe    4 年前

    您需要使用@app.callback才能使您的 InputGroupAddon 动态

    import dash
    from dash.dependencies import Input, Output
    import dash_core_components as dcc
    import dash_html_components as html
    import dash_bootstrap_components as dbc
    
    app = dash.Dash(__name__)
    
    app.layout = (
        html.Div([
                dbc.InputGroup([
                    dbc.RadioItems(
                        id="type",
                        persistence=True,
                        persistence_type="memory",
                        options=[
                            {"label": "option1", "value": "option1"},
                            {"label": "option2", "value": "option2"}
                        ],
                        value="option1",
                        style={"margin-left":"8px"}
                    ),
                ],
                style={"margin-top":"20px","width": "80%", "float": "left"},
            ),
            dbc.InputGroup([
                dbc.InputGroupAddon(
                    id='dbc-input-addon',
                    style={"margin-left":"8px"}),
                dbc.Input(
                    id="floor",
                    persistence=True,
                    persistence_type="memory"
                ),
            ])
        ])
    )
    
    @app.callback(
        Output(component_id='dbc-input-addon', component_property='children'),
        [Input(component_id='type', component_property='value')]
    )
    def change_input(option_value):
        if option_value == 'option1':
            input_txt = 'Floor'
        elif option_value == 'option2':
            input_txt = 'No floor'
        return input_txt
    
    if __name__ == '__main__':
        app.run_server(debug=True)