![](/img/trans.png)
[英]How to use react-select with react-bootstrap to get the values
[英]How can I solve a z-index ploblem with react-bootstrap component and react-select menu?
我正在使用 react-select 和 react-bootstrap,我遇到了以下问题。 我创建了一个引导卡,里面有一个反应选择,问题是当我打开反应选择菜单时,这个没有完全显示。 我尝试将 z-index 值和 position 更改为相对值,但没有任何改变。 这是我的问题的图像:图像
import React from "react";
import Form from "react-bootstrap/Form";
import Row from "react-bootstrap/Row";
import Col from "react-bootstrap/Col";
import MonthSelect from "../../../selects/MonthSelect";
import Container from "react-bootstrap/Container";
import Accordion from "react-bootstrap/Accordion";
import Card from "react-bootstrap/Card";
import Button from "react-bootstrap/Button";
const FeeSearch = props => {
const { register } = props;
return (
<>
<Accordion>
<Card border="secondary">
<Card.Header style={{ padding: "5px" }}>
<Accordion.Toggle as={Button} variant="link">
<h6>Búsqueda</h6>
</Accordion.Toggle>
</Card.Header>
<Accordion.Collapse in={true}>
<Card.Body>
<Container fluid>
<Form.Group>
<Row>
<Col xs={3}>
<Form.Label>Mes</Form.Label>
<MonthSelect register={register} />
</Col>
</Row>
</Form.Group>
</Container>
</Card.Body>
</Accordion.Collapse>
</Card>
</Accordion>
</>
);
};
export default FeeSearch;
使用menuPortalTarget
道具将您的 react-select 呈现到文档的根目录中。 问题是您的 react-select 被渲染到具有overflow: hidden
的特定堆叠上下文中。 通过渲染到正文中,您可以确保没有包装上下文切断您的内容:
<Select menuPortalTarget={document.body} />
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.