【问题标题】:Reactstrap formfeedback not displayingReactstrap表单反馈不显示
【发布时间】:2020-01-08 23:03:00
【问题描述】:

我正在使用Reactstrap v8.0.1,我正在尝试显示错误消息并使用红色边框渲染该字段,但它似乎根本不起作用

以下是我用来呈现表单的代码......但什么都没有。

<Col lg="5">
    <Card className="bg-secondary shadow border-0">
        <CardBody className="px-lg-5 py-lg-5">
            <Form role="form">
                <FormGroup className="mb-3">
                    <InputGroup className="input-group-alternative">
                        <InputGroupAddon addonType="prepend">
                            <InputGroupText>
                                <i className="ni ni-email-83" />
                            </InputGroupText>
                        </InputGroupAddon>

                        <Input placeholder="Email" type="email" name="emailAddress" invalid />
                    </InputGroup>
                    <FormFeedback>This bollocks is not showing!!!!</FormFeedback>
                </FormGroup>

                <div className="text-center">
                    <Button className="my-4" color="primary" type="button">Submit</Button>
                </div>
            </Form>
        </CardBody>
    </Card>
</Col>

是否有人在显示可以提供帮助的表单反馈时遇到任何问题?

【问题讨论】:

    标签: reactjs reactstrap


    【解决方案1】:

    FormFeedback 块必须与 Input 块在同一个父级中才能工作,另外最好通过向其添加该属性来标记它应该在输入无效时显示,例如:

    <Col lg="5">
        <Card className="bg-secondary shadow border-0">
            <CardBody className="px-lg-5 py-lg-5">
                <Form role="form">
                    <FormGroup className="mb-3">
                        <InputGroup className="input-group-alternative">
                            <InputGroupAddon addonType="prepend">
                                <InputGroupText>
                                    <i className="ni ni-email-83" />
                                </InputGroupText>
                            </InputGroupAddon>
    
                            <Input 
                                  placeholder="Email" 
                                  type="email" 
                                  name="emailAddress" 
                                  invalid={type invalid condition here!} />
                            <FormFeedback invalid>This bollocks is not showing!!!!</FormFeedback>
                        </InputGroup>                    
                    </FormGroup>
    
                    <div className="text-center">
                        <Button className="my-4" color="primary" type="button">Submit</Button>
                    </div>
                </Form>
            </CardBody>
        </Card>
    </Col>
    
    

    【讨论】:

      【解决方案2】:

      您需要将“FormFeedback”移动到“InputGroup”中,然后它才会起作用。

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 2018-07-02
        • 2016-05-26
        • 2020-09-09
        • 2011-02-10
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多