gpt4 book ai didi

reactjs - Reactstrap 表单反馈不显示

转载 作者:行者123 更新时间:2023-12-03 19:24:42 24 4
gpt4 key购买 nike

我正在使用 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>

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

最佳答案

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>

关于reactjs - Reactstrap 表单反馈不显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57815720/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com