React-bootstrap 下拉箭頭不顯示

Question

請任何人告訴我為什么我的下拉箭頭不可見。 提前致謝。 我現在的state是：

import { Col, Row, ListGroup, Form} from 'react-bootstrap'

 {something.Available > 0 && (
                    <ListGroup.Item>
                      <Row>
                        <Col>Quantity:</Col>
                        <Col xs='auto'>
                          <Form.Control
                            as="select"
                            value={}
                            onChange={}
                          >
                            {
                              [...Array(something.Available).keys()].map((val) => (
                                <option key={val + 1} value={val + 1}>
                                  {val + 1}
                                </option>
                              ))
                            }
                          </Form.Control>
                        </Col>
                      </Row>
                    </ListGroup.Item>
                  )}

如果這個問題看起來微不足道，我很抱歉。

Answer 1

我相信這是 react-bootstrap 的問題，需要添加一個className="form-select"來獲取下拉箭頭。 但是這樣做會出現顯示所選值的問題。 填充關閉導致值被從視圖中推出。 我的修復是創建一個 class 來覆蓋填充

<Form.Control
    className="form-select form-select-override"
    as="select"
    value={}
    onChange={}
>

然后在 css 文件中

.form-select-override {
  padding: 0.5rem 0.5rem 0.75rem 1.5rem !important;
}