ReactStrap-Eingabegruppen-Fehler (nicht 100% Breite)

Question

Hat jemand diesen Fehler, bei dem ein Eingabegruppen-Add-On oder -Dropdown die Hälfte der gesamten Breite statt 100% einnimmt. (Im Grunde nimmt der InputGroupButton die anderen 50% also 100% Breite automatisch zwischen zwei Elementen auf, aber in den Reactstrp Dokumenten gibt es alle Anzeichen, dass dies gegen das erwartete Verhalten ist)

Ich möchte, dass meine Eingabegruppe 100% Breite hat wie der Rest. https://reactstrap.github.io/components/input-group/

das ist, was ich habe zur Zeit:

und wenn ich Inspizieren öffnen Element:

Sie können sehen, dass die InputGroupButton isn t se Ein Padding oder einen Rand wie "Auto" oder etwas Ähnliches, von dem Sie erwarten, dass er dafür verantwortlich ist.

hier ist die kleine snipet von reagieren in Bezug auf das Passwort-Feld machen:

render() { 
    return (
     <Label className="password"> 
      <InputGroup> 
       <Input 
        className="password__input" 
        placeholder="Mot de Passe" 
        type={this.state.type} 
        onChange={this.passwordStrength} 
       /> 
       <InputGroupButton><Button onClick={this.showHide}> 
        {this.state.type === 'password' ? 
         <i className="fa fa-eye" aria-hidden="true" /> 
         : 
         <i className="fa fa-eye-slash" aria-hidden="true" /> 
        }</Button></InputGroupButton> 
      </InputGroup> 
      <span 
       className="password__strength" 
       data-score={this.state.score} 
      /> 
     </Label> 
    ); 
} 

und hier ist das rendern, die es nennt (es auf „ShowPassword“ genannt):

render() { 
    return (
     <div> 
      <Button color="info" onClick={this.toggle}>{this.props.buttonLabel}</Button> 
      <Modal isOpen={this.state.modal} toggle={this.toggle} className={this.props.className}> 
       <ModalHeader toggle={this.toggle}>Créer un compte</ModalHeader> 
       <ModalBody> 
        Veuillez renseigner les champs ci-dessous afin de créer votre compte 
        <InputGroup> 
         <Input placeholder="Nom d'utilisateur" /> 
        </InputGroup> 
        <InputGroup> 
         <Input placeholder="E-mail" /> 
        </InputGroup> 
        <InputGroup> 
         <ShowPassword /> 
        </InputGroup> 
        <InputGroup> 
         <Input placeholder="Confirmer"/> 
        </InputGroup> 
       </ModalBody> 
       <ModalFooter> 
        <Button color="primary" onClick={this.toggle}>Envoyer</Button>{' '} 
        <Button color="secondary" onClick={this.toggle}>Annuler</Button> 
       </ModalFooter> 
      </Modal> 
     </div> 
    ); 
} 

Answer 1

Dies ist kein ist Fehler. Sie verwenden reactstrap eine unbeabsichtigte Art und Weise. reactstrap basiert auf Bootstrap CSS Library. Bootstrap erwartet von Ihnen, dass Sie Ihre Elemente und CSS-Klassen auf eine bestimmte Weise strukturieren, die in der Dokumentation beschrieben wird. Wenn wir ihnen nicht folgen, können wir nicht das erwartete Ergebnis erzielen.

Als Beispiel erwartet Bootstrap nur bestimmte Elemente wie Input, InputGroupButton und InputGroupAddon innerhalb des InputGroup. Aber in Ihrem Fall, wenn wir ShowPassword mit seiner tatsächlichen JSX Struktur ersetzen, haben Sie eine Label innerhalb InputGroup und eine andere InputGroup innerhalb der Label. Aus diesem Grund wird es nicht wie erwartet wiedergegeben.

Zuerst, um Ihre ShowPassword zu wickeln, sollten Sie eine div anstelle einer Label verwenden.

render() { 
    return (
    <div className="password"> 
     <InputGroup> 
     <Input 
      className="password__input" 
      placeholder="Mot de Passe" 
      type={this.state.type} 
      onChange={this.passwordStrength} 
     /> 
     <InputGroupButton> 
      <Button onClick={this.showHide}> 
      {this.state.type === "password" 
       ? <i className="fa fa-eye" aria-hidden="true" /> 
       : <i className="fa fa-eye-slash" aria-hidden="true" />} 
      </Button> 
     </InputGroupButton> 
     </InputGroup> 
     <span className="password__strength" data-score={this.state.score} /> 
    </div> 
); 
} 

und dann sollten Sie zusätzliche InputGroup welche wickeln Ihre ShowPassword Komponente entfernen.

render() { 
    return (
    <div> 
     <Button color="info" onClick={this.toggle}> 
     {this.props.buttonLabel} 
     </Button> 
     <Modal 
     isOpen={this.state.modal} 
     toggle={this.toggle} 
     className={this.props.className} 
     > 
     <ModalHeader toggle={this.toggle}>Créer un compte</ModalHeader> 
     <ModalBody> 
      Veuillez renseigner les champs ci-dessous afin de créer votre compte 
      <InputGroup> 
      <Input placeholder="Nom d'utilisateur" /> 
      </InputGroup> 
      <InputGroup> 
      <Input placeholder="E-mail" /> 
      </InputGroup> 
      <ShowPassword /> 
      <InputGroup> 
      <Input placeholder="Confirmer" /> 
      </InputGroup> 
     </ModalBody> 
     <ModalFooter> 
      <Button color="primary" onClick={this.toggle}> 
      Envoyer 
      </Button>{" "} 
      <Button color="secondary" onClick={this.toggle}> 
      Annuler 
      </Button> 
     </ModalFooter> 
     </Modal> 
    </div> 
); 
} 

Hoffentlich erhalten Sie jetzt das erwartete Ergebnis.