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

这可能是一个错误，因为'value'的{{1}}属性似乎已恢复为默认值，并且不保留对输入值的更改。但是，您似乎可以通过将dcc.Input作为附加输入参数传递给回调函数来强迫更改继续存在：

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'}]

为什么div内容不以破折号/方式更新？

1 个答案: