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

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' 的值属性但是每一个都是动态生成的所以我想我会创建我在 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'}]

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

Why doesn't the div content update in dash / plotly?

python

plotly-dash