Dash ：根据选择的单选选项动态更新元素答案

【问题标题】：Dash : Dynamically update an element based on radio option selectedDash ：根据选择的单选选项动态更新元素
【发布时间】：2021-01-13 08:15:18
【问题描述】：

我的仪表板应用程序中有一个单选元素和一个文本框元素。我想根据回调中的选定选项更新字段的文本。


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

                   ],
                  
),

如何根据收音机中选择的选项使文本“Floor”变为动态？

【问题讨论】：

标签： python reactjs flask plotly plotly-dash

【解决方案1】：

您需要使用@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)

【讨论】：