Question

有没有人有这个错误，输入组插件或下拉列表占据整个宽度的一半而不是100％。（基本上InputGroupButton占据了另外50％，因此100％宽度在两个元素之间自动传播，但在Reactstrp文档中，每个迹象表明这与预期行为相反）

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

这就是我现在所拥有的：

如果我打开Inspect Element：

你可以看到InputGroupButton没有设置填充或像＃34; auto＆＃34;或类似的东西，你期望对此负责。

这里是关于密码字段的反应渲染的小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>
    );
}

这里是调用它的渲染（它在＆＃34; ShowPassword和＃34中被调用）：

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

{{1}}

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

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

1 个答案: