Javascript 默认选中的复选框在单击时不切换
我正在使用Reactjs。我正在使用react bootstrap中的Javascript 默认选中的复选框在单击时不切换,javascript,reactjs,checkbox,react-bootstrap,Javascript,Reactjs,Checkbox,React Bootstrap,我正在使用Reactjs。我正在使用react bootstrap中的模式创建一个模式表单。我使用引导创建了一个表单。表单包含默认情况下需要选中的复选框。因此,我对输入复选框使用了checked属性。但是当我点击复选框时,它不会切换。我不太明白这个问题。这是我的密码: <Modal show={this.state.showModal} onHide={this.closeModal}> <Modal.Header closeButton> <Modal.T
模式创建一个模式表单。我使用引导创建了一个表单。表单包含默认情况下需要选中的复选框。因此,我对输入复选框使用了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>
创建新用户
用户名
密码
确认密码
电子邮件地址
启用
锁定
证实
取消
这是。提前感谢您的帮助。查看console日志,React通常会讲述如何使用组件。在这种情况下,它说:
警告:表单propType失败:您向表单提供了一个选中的道具
没有onChange
处理程序的字段。这将呈现只读
领域如果字段应该是可变的,请使用defaultChecked
。否则,,
设置onChange
或readOnly
。检查的渲染方法
文件列表
所以只要:
defaultChecked={this.state.enabled}
而不是checked={this.state.enabled}
查看控制台日志,React通常会说很多如何处理组件的内容。在这种情况下,它说:
警告:表单propType失败:您向表单提供了一个选中的道具
没有onChange
处理程序的字段。这将呈现只读
领域如果字段应该是可变的,请使用defaultChecked
。否则,,
设置onChange
或readOnly
。检查的渲染方法
文件列表
所以只要:
defaultChecked={this.state.enabled}
而不是checked={this.state.enabled}
在我的例子中,我觉得“defaultChecked”工作不正常。所以我用“checked”和“onChange”来切换状态
例如
就我而言,我觉得“defaultChecked”不能正常工作。所以我用“checked”和“onChange”来切换状态
例如
checked={this.state.enabled} onChange={this.setState({enabled : !this.state.enabled})}