Standard checked checkbar toggle on click

Question

Ich benutze Reactjs. Ich arbeite an einem modalen Formular mit Modal from react-bootstrap erstellen. Ich habe ein Formular mit Bootstrap erstellt. Das Formular enthält das Kontrollkästchen, das standardmäßig aktiviert werden muss. Also habe ich die Eigenschaft checked für das Eingabe-Kontrollkästchen verwendet. Aber das Kontrollkästchen schaltet nicht um, wenn ich darauf klicke. Ich kann das Problem nicht richtig erkennen. Hier ist mein Code:

<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> 

Hier ist . Vielen Dank für die Hilfe im Voraus.

Answer 1

Watch-Konsole Protokoll, reagieren in der Regel viel sagen, wie Sie mit Ihren Komponenten zu tun. In diesem Fall heißt es:

Warnung: Fehler Form PropType: Sie bot eine checked prop zu einem Formular Feld ohne onChange Handler. Dadurch wird ein schreibgeschütztes Feld angezeigt. Wenn das Feld änderbar sein soll, verwenden Sie defaultChecked. Andernfalls entweder onChange oder readOnly festlegen. Überprüfen Sie die Rendermethode FileList.

Also einfach: defaultChecked={this.state.enabled} statt checked={this.state.enabled}