plotlyDash click의 시간에만 두 input의 값을 읽습니다

과제.

송신 단추를 트리거로 두 개의 입력이 프로그램을 쓴 곳을 읽으려고 했고, input의 변화도 트리거가 되었다.

app.layout = html.Div([
    html.Div(
        [
            dbc.Form(
                [
                    dbc.FormGroup(
                        [
                            dbc.Label("Column Name", className="mr-2"),
                            dcc.Input(
                                id = "input-col-name",
                                type = "text",
                                placeholder="Item Name",
                            ),
                        ],
                        className="mr-3",
                    ),
                    dbc.FormGroup(
                        [
                            dbc.Label("Record Count", className="mr-2"),
                            dcc.Input(
                                id = "input-row-count",
                                type = "text",
                                placeholder="Record Count",
                            ),
                        ],
                        className="mr-3",
                    ),
                    dbc.Button("Submit", id='submit-val', n_clicks=0, color="primary"),
                ],
                inline=True
            )
        ]
    ),
    html.Div(id="table1")
])

@app.callback(
    Output('table1', 'children'),
    [Input('submit-val', 'n_clicks'),
    Input('input-col-name', 'value'),
    Input('input-row-count', 'value')]
)
def update_output(n_clicks, col_name:str, row_count:int):
    if col_name and row_count:
        df.create_numeric(col_name, int(row_count))
        result = df.publish()
        data = result.to_dict('rows')
        columns =  [{"name": i, "id": i,} for i in (result.columns)]
        return dt.DataTable(data=data, columns=columns)
    else:
        return

해결의 실마리

인풋의 생각이 틀렸어요.

Input은 Callback 함수의 입력이지만 자바스크립트 등에watcher 작용이 있기 때문에value가 변하면 트리거가 함수를 발동합니다.만약 입력이 없다면, 아무리 검사해도 원래의 동작, 단추의 동작 앞에서 행동할 것이다

해결책

State 사용

Dash의 State를 Callback 매개 변수로 설정하면 변경 사항에 따라 발동할 수 없지만 함수로 입력할 수 있습니다(State가 변경되면 감지할 수 없음).
대시의 문서에도 이러한 사용 방법이 기술되어 있다
Dash App With State 참조
https://dash.plotly.com/basic-callbacks

# 訂正前
Input('input-col-name', 'value')
Input('input-row-count', 'value')

#訂正後
State('input-col-name', 'value')
State('input-row-count', 'value')