[英]Default checked checkbox not toggling on click
我正在使用 Reactjs。 我正在使用Modal from react-bootstrap
創建一個 Modal 表單。 我使用引導程序創建了一個表單。 表單包含需要默認選中的復選框。 所以我在輸入復選框中使用了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>
觀察控制台日志,React 通常會說很多如何處理你的組件。 在這種情況下,它說:
警告:表單 propType 失敗:您在沒有
onChange
處理程序的情況下向表單字段提供了已checked
道具。 這將呈現只讀字段。 如果該字段應該是可變的,請使用defaultChecked
。 否則,設置onChange
或readOnly
。 檢查FileList
的渲染方法。
所以只是: defaultChecked={this.state.enabled}
而不是checked={this.state.enabled}
就我而言,我覺得“defaultChecked”無法正常工作。 所以我使用“checked”和“onChange”來切換狀態。
例如。
checked={this.state.enabled} onChange={this.setState({enabled : !this.state.enabled})}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.