为什么 dash / plotly 中的 div 内容不更新？

Question

我尝试使用一个 div，其中包含用户可以与之交互的各种元素，然后将整个 div 元素作为 State 传递给一个函数，以便能够读取所有各种输入。

但是，div 似乎没有得到更新。我写了一个小程序，显示如下问题：

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


app = dash.Dash(__name__)                                                       
app.css.append_css({                                                            
    'external_url': ('https://stackpath.bootstrapcdn.com/'                      
                     'bootstrap/4.1.1/css/bootstrap.min.css')                   
    })                                                                          


app.layout = html.Div(                                                          
    className='container-fluid',                                                
    children=[                                                                  
        html.Div(id='test', children=[                                          
            html.Button(id='btn', children='Press me'),                         
            dcc.Input(id='inp', value='asdf')                                   
        ]),                                                                     
        html.Div(id='out')]                                                     
)                                                                               


@app.callback(                                                                  
    Output('out', 'children'),                                                  
    [Input('btn', 'n_clicks')],                                                 
    [State('test', 'children')]                                                 
)                                                                                  
def update(n, div):                                                                
    print(div) # This div always contains the string 'asdf' even if I type something else in the Input field


app.run_server(debug=True, port=8888)                                              

我知道在这种简单的情况下，我可以让 State 依赖于 id='inp' 的 value 属性，但是每个都是动态生成的，所以我想我会创建我在 div 中创建的任何内容然后传递 div 并解析它（我有代码）。唯一的问题是我无法更新 div！

编辑：

似乎对这个问题感到困惑。我试图通过父 div 获取 Input 框的值并传递孩子。然而，这并没有奏效！我在代码中添加了注释来解释这一点。

Answer 1

这可能是一个错误，因为dcc.Input 的'value' 属性似乎恢复为默认值，并且不会保留对输入值的更改。但是，您似乎可以通过将 State('inp', 'value') 作为附加输入参数传递给回调函数来强制更改保持：

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

app = dash.Dash(__name__)

app.layout = html.Div(
    className='container-fluid',
    children=[
        html.Div(id='test', children=[
            html.Button(id='btn', children='Press me'),
            dcc.Input(id='inp', value='asdf')
        ]),
        html.Div(id='out', children=[])]
)

@app.callback(
    Output('out', 'children'),
    [Input('btn', 'n_clicks')],
    [State('test', 'children'),
    State('inp', 'value')]
)
def update(n, div, inp):

    print(div)

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

产量：

[{'props': {'children': 'Press me', 'id': 'btn'}, 'type': 'Button', 'namespace': 'dash_html_components'}, {'props': {'id': 'inp', 'value': 'asdf'}, 'type': 'Input', 'namespace': 'dash_core_components'}]

然后在更改输入并按下按钮时：

[{'props': {'children': 'Press me', 'id': 'btn', 'n_clicks': 1, 'n_clicks_timestamp': 1542814708494}, 'type': 'Button', 'namespace': 'dash_html_components'}, {'props': {'id': 'inp', 'value': 'hi'}, 'type': 'Input', 'namespace': 'dash_core_components'}]