默认选中的复选框不会在单击时切换答案

【问题标题】：Default checked checkbox not toggling on click默认选中的复选框不会在单击时切换
【发布时间】：2025-12-23 12:35:11
【问题描述】：

我正在使用 Reactjs。我正在使用Modal from react-bootstrap 创建一个模态表单。我使用引导程序创建了一个表单。表单包含默认需要选中的复选框。所以我使用checked 属性作为输入复选框。但是当我单击它时，该复选框不会切换。我无法完全弄清楚问题所在。这是我的代码：

<Modal show={this.state.showModal} onHide={this.closeModal}>
<Modal.Header closeButton>
    <Modal.Title>Create New User</Modal.Title>
</Modal.Header>
<Modal.Body>

    <form class="form-horizontal" name="newUser">
        <div class="form-group">
            <label class="control-label col-md-4" for="userName">User Name</label>
            <div class="col-md-6">
                <input type="text" class="form-control" id="userName" ref="userName" placeholder="User Name"/>
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-md-4" for="password">Password</label>
            <div class="col-md-6">
                <input type="password" class="form-control" id="password" ref="password" placeholder="Enter Password"/>
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-md-4" for="password">Confirm Password</label>
            <div class="col-md-6">
                <input type="password" class="form-control" id="confirmPassword" ref="password" placeholder="Re-enter Password"/>
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-md-4" for="email">Email Address</label>
            <div class="col-md-6">
                <input type="email" class="form-control" id="email" ref="email" placeholder="Email Address"/>
            </div>
        </div>
        <div class="form-group">
            <div class="col-md-offset-4 col-md-6">
                <div class="checkbox-inline">
                    <label><input type="checkbox" id="enabled" ref="enabled" value="enabled" checked/> Enabled </label>
                </div>
                <div class="checkbox-inline">
                    <label><input type="checkbox" id="locked" ref="locked" value="locked" /> Locked </label>
                </div>
            </div>
        </div>
    </form>
</Modal.Body>
<Modal.Footer>
    <Button onClick={this.submitUser} bsStyle="primary">Confirm</Button>
    <Button onClick={this.closeModal} bsStyle="warning">Cancel</Button>
</Modal.Footer>
</Modal>

这里是。提前感谢您的帮助。

【问题讨论】：

标签： javascript reactjs checkbox react-bootstrap

【解决方案1】：

看控制台日志，React 通常会说很多如何处理你的组件。在这种情况下，它说：

警告：表单 propType 失败：您向表单提供了 checked 道具没有onChange 处理程序的字段。这将呈现只读场地。如果该字段应该是可变的，请使用defaultChecked。否则，设置onChange 或readOnly。检查渲染方法 FileList.

所以只要： defaultChecked={this.state.enabled} 而不是 checked={this.state.enabled}

【讨论】：

【解决方案2】：

就我而言，我觉得“defaultChecked”无法正常工作。所以我用“checked”和“onChange”来切换状态。

例如。

checked={this.state.enabled} onChange={this.setState({enabled : !this.state.enabled})}

【讨论】：