デフォルトのチェックボックスはクリック時にトグルしません

Question

私はReactjを使用しています。私は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> 

ここはです。事前に助けてくれてありがとう。

Answer 1

コンソールログを見る、通常、コンポーネントには多くのことを言っています。この場合、それは言う：

警告：失敗したフォームのpropType：あなたはonChangeハンドラせずにフォーム フィールドにchecked小道具を提供します。これにより、読み取り専用フィールド がレンダリングされます。フィールドを変更可能にする場合は、defaultCheckedを使用します。それ以外の場合は をonChangeまたはreadOnlyのいずれかに設定します。 FileListのレンダリング方法を確認してください。

だから： defaultChecked={this.state.enabled}の代わりchecked={this.state.enabled}