ReactStrap輸入組錯誤（不是100％寬度）

Question

有沒有人有這個錯誤，其中一個輸入組插件或下拉列表佔整個寬度的一半而不是100％。 （基本上InputGroupButton佔用另外50％，所以100％寬度自動在兩個元素之間傳播，但在Reactstrp文檔中有各種跡象表明這是違背預期的行爲）

我希望我的輸入組寬度爲100％像其他人一樣。 https://reactstrap.github.io/components/input-group/

這是我目前有：

，如果我打開檢查元素：

你可以看到InputGroupButton ISN不是設置填充或像「自動」或類似的邊緣，你期望對此負責。

這裏的小snipet反應使有關密碼字段：

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> 
    ); 
} 

和這裏的渲染調用它（這就是所謂的「ShowPassword」）：

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

這不是一個錯誤。你正在以無意的方式使用reactstrap。 reactstrap基於Bootstrap CSS Library。 Bootstrap期望您以文檔中描述的某種方式構建元素和CSS類。如果我們不遵循它們，我們無法得到預期的結果。

作爲示例，Bootstrap僅在InputGroup內預期某些元素，例如Input,InputGroupButton和InputGroupAddon。但在你的情況下，如果我們將ShowPassword替換爲其實際的JSX結構，則在Label內將有Label，其中InputGroup和InputGroup。這是爲什麼它不按預期呈現。

首先，要包裝您的ShowPassword，您應該使用div而不是Label。

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> 
); 
} 

，然後你應該刪除額外InputGroup其包裝你ShowPassword組件。

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> 
); 
} 

希望現在你會得到預期的結果。