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

Question

有没有人有这个错误，输入组插件或下拉菜单占据了整个宽度的一半而不是 100%。 （基本上 InputGroupButton 占用了另外 50%，因此 100% 宽度自动在两个元素之间展开，但在 Reactstrp 文档中，所有迹象都表明这与预期行为背道而驰）

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

这是我目前拥有的：

如果我打开检查元素：

您可以看到 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。但是在您的情况下，如果我们将ShowPassword 替换为其实际的JSX 结构，您将在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>
  );
}

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