ReactStrap 输入组错误（不是 100% 宽度）

Question

有没有人遇到这个错误，输入组插件或下拉列表占用整个宽度的一半而不是 100%。（基本上 InputGroupButton 占据了另外 50%，因此 100% 的宽度自动分布在两个元素之间，但在 Reactstrp 文档中有各种迹象表明这违背了预期的行为）

我希望我的输入组像其他组一样宽度为 100%。 https://reactstrap.github.io/components/input-group/

这是我目前拥有的：

如果我打开 Inspect Element :

您可以看到 InputGroupButton 没有像 "auto" 那样设置填充或边距或您希望对此负责的类似内容。

这是关于密码字段的反应渲染的小片段：

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。但在你的情况下，如果我们用它的实际 JSX 结构替换 ShowPassword，你将在 InputGroup 中有一个 Label，在 Label 中有另一个 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>
  );
}

希望现在您会得到预期的结果。

ReactStrap 输入组错误（不是 100% 宽度）

ReactStrap input group bug (not 100% width)

css

reactjs