javascript - InputGroupAddon tag not working with reactstrap. Any possible solution for this - Stack Overflow

admin管理员组

文章数量:1405110

ERROR in ./src/ponents/TodoForm.js 25:39-54 export 'InputGroupAddon' (imported as 'InputGroupAddon') was not found in 'reactstrap' (possible exports: Accordion, AccordionBody, AccordionContext, AccordionHeader, AccordionItem, Alert, Badge, Breadcrumb, BreadcrumbItem, Button, ButtonDropdown, ButtonGroup, ButtonToggle, ButtonToolbar, Card, CardBody, CardColumns, CardDeck, CardFooter, CardGroup, CardHeader, CardImg, CardImgOverlay, CardLink, CardSubtitle, CardText, CardTitle, Carousel, CarouselCaption, CarouselControl, CarouselIndicators, CarouselItem, Col, Collapse, Container, Dropdown, DropdownContext, DropdownItem, DropdownMenu, DropdownToggle, Fade, Form, FormFeedback, FormGroup, FormText, Input, InputGroup, InputGroupText, Label, List, ListGroup, ListGroupItem, ListGroupItemHeading, ListGroupItemText, ListInlineItem, Media, Modal, ModalBody, ModalFooter, ModalHeader, Nav, NavItem, NavLink, Navbar, NavbarBrand, NavbarText, NavbarToggler, Offcanvas, OffcanvasBody, OffcanvasHeader, Pagination, PaginationItem, PaginationLink, Placeholder, PlaceholderButton, Polyfill, Popover, PopoverBody, PopoverHeader, PopperContent, PopperTargetHelper, Progress, Row, Spinner, TabContent, TabPane, Table, Toast, ToastBody, ToastHeader, Tooltip, UncontrolledAccordion, UncontrolledAlert, UncontrolledButtonDropdown, UncontrolledCarousel, UncontrolledCollapse, UncontrolledDropdown, UncontrolledPopover, UncontrolledTooltip, Util)

webpack piled with 1 error and 2 warnings

ERROR in ./src/ponents/TodoForm.js 25:39-54 export 'InputGroupAddon' (imported as 'InputGroupAddon') was not found in 'reactstrap' (possible exports: Accordion, AccordionBody, AccordionContext, AccordionHeader, AccordionItem, Alert, Badge, Breadcrumb, BreadcrumbItem, Button, ButtonDropdown, ButtonGroup, ButtonToggle, ButtonToolbar, Card, CardBody, CardColumns, CardDeck, CardFooter, CardGroup, CardHeader, CardImg, CardImgOverlay, CardLink, CardSubtitle, CardText, CardTitle, Carousel, CarouselCaption, CarouselControl, CarouselIndicators, CarouselItem, Col, Collapse, Container, Dropdown, DropdownContext, DropdownItem, DropdownMenu, DropdownToggle, Fade, Form, FormFeedback, FormGroup, FormText, Input, InputGroup, InputGroupText, Label, List, ListGroup, ListGroupItem, ListGroupItemHeading, ListGroupItemText, ListInlineItem, Media, Modal, ModalBody, ModalFooter, ModalHeader, Nav, NavItem, NavLink, Navbar, NavbarBrand, NavbarText, NavbarToggler, Offcanvas, OffcanvasBody, OffcanvasHeader, Pagination, PaginationItem, PaginationLink, Placeholder, PlaceholderButton, Polyfill, Popover, PopoverBody, PopoverHeader, PopperContent, PopperTargetHelper, Progress, Row, Spinner, TabContent, TabPane, Table, Toast, ToastBody, ToastHeader, Tooltip, UncontrolledAccordion, UncontrolledAlert, UncontrolledButtonDropdown, UncontrolledCarousel, UncontrolledCollapse, UncontrolledDropdown, UncontrolledPopover, UncontrolledTooltip, Util)

webpack piled with 1 error and 2 warnings

• javascript
• html
• reactjs
• bootstrap-4
• frontend

Share Improve this question Follow asked May 15, 2022 at 14:39 SrijanSrijan 14111 gold badge22 silver badges77 bronze badges 1

• <InputGroupAddon addonType="prepend"> <Button color="warning" //Todo: OnClick > Add </Button> </InputGroupAddon> – Srijan Commented May 15, 2022 at 14:40

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

The Latest version of reactstrap doesn't support the use of InputGroupAddon. Use it directly from bootstrap.

This should work for you.

<div className="input-group-append">
  <span className="input-group-text" id="basic-addon2">Search</span>
</div>

need to see what you import. I hope this line will help you.

import { InputGroup, InputGroupAddon, InputGroupText, Input } from 'reactstrap';

I also face a similar issue but I have found an answer at https://github./reactstrap/reactstrap/issues/2171.

InputGroupAddon - This is no longer needed in Bootstrap 5, you can now add Buttons, Inputs directly to InputGroups in the order you wish.

本文标签： javascriptInputGroupAddon tag not working with reactstrap Any possible solution for thisStack Overflow