Question

我在获取复选框进行更新以匹配我的状态时遇到麻烦。

复选框显示为：

<div className={"form-group row " + (this.state.displayFormElements.infoRequiredApiCall ? '' : 'd-none')}>
                            <div className="col-sm-2">Get Setup API Call</div>
                            <div className="col-sm-10">
                                <div className="form-check">
                                    <input className="form-check-input" type="checkbox" id="infoRequiredApiCall" checked={this.state.pendingSubmission.infoRequiredApiCall} onChange={this.handleCheckboxUpdate} />
                                    <label className="form-check-label" htmlFor="gridCheck1">
                                        Required
                                </label>
                                </div>
                            </div>
                        </div>

onChange函数为：

handleCheckboxUpdate(e) {
    e.preventDefault()
    let pendingSubmission = { ...this.state.pendingSubmission }
    if (this.state.pendingSubmission[e.target.id] === false) {
        pendingSubmission[e.target.id] = true
    } else {
        pendingSubmission[e.target.id] = false
    }
    this.setState({ pendingSubmission })
}

这是我所看到的行为。

1。复选框未选中+状态值为false

我单击复选框

2。复选框未选中+状态值为true

我单击复选框

3。复选框打勾+状态值为true

我单击复选框

4。复选框打勾+状态值错误

我单击复选框

5。复选框未选中+状态值为false

我尝试了几种不同的解决方案，包括更常规的onChange函数，该函数将值写入状态（默认情况下为“ on”，默认情况下为“ on”）。

>

我在这里想念什么。我想我了解setState的异步行为，并且可以使用此方法更新下拉列表和文本输入的值。

谢谢！

更新React复选框值

0 个答案: