css - ReactStrap 输入组错误(不是 100% 宽度)

Question

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

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

这是我目前拥有的:

如果我打开 Inspect Element :

您可以看到 InputGroupButton 没有设置填充或边距，如“auto”或您希望对此负责的类似内容。

这是关于密码字段的 react 渲染的小片段:

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 只需要某些元素，如 Input , InputGroupButton和 InputGroupAddon在InputGroup里面.但在你的情况下，如果我们更换 ShowPassword使用其实际的 JSX 结构，您将拥有一个 Label里面InputGroup和另一个 InputGroup在Label里面.为什么它没有按预期呈现。

首先，包装你的 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>
  );
}

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