reactjs - 添加搜索以选择 React Bootstrap React JS
问题描述
我正在使用 react-bootstrap 创建一个选择列表,默认情况下在列表中有一个搜索,但只有第一个字符。有一种方法可以在我的选择中添加搜索,例如来自react-select 的选择。请问有什么帮助吗?
制作.js
import Select from '../retour/bloc/select';
export default function Facture() {
return (
<Select
label="Bordereaux"
name="Bordereaux"
changed={selectPick}
options={listBordereaux ? listBordereaux : []}
onClick={toggleOpen}
search
/>)}
选择.js
import React, { Component } from 'react';
import { Form, Row, Col } from 'react-bootstrap';
import PropTypes from 'prop-types';
import '../retour.css'
export default class Select extends Component {
render() {
let { label, name, value, changed, options } = this.props;
return (
<Form.Group as={Row}>
<Form.Label column lg={4} sm={10} className=""> {label} : </Form.Label>
<Col lg={6} sm={10}>
<Form.Control
name={name}
// size="sm"
as="select"
className="retour-select"
value={value}
onChange={(event) => changed(event, name)}
>
<option value="" hidden> {label} </option>
{label === "Bordereaux" ?
options.map(el =>
<option key={el.id} value={el.ref}>
}
</Form.Control>
</Col>
</Form.Group>
);
}
}
Select.propTypes = {
label: PropTypes.string,
};
解决方案
推荐阅读
- azure-bot-service - Azure QnA 机器人服务错误:CreateAppOnlySteps
- django - 在 Heroku 上编辑 Django 文件而不编辑我的数据库文件
- python - 带有for循环的numpy数组摘要
- javascript - Firebase Analytics - 基于 file:// 的环境支持
- angular - 使用 Jasmin 的 Angular 8 单元测试 EventSource
- javascript - JSON中的Highcharts堆积柱形图没有绘制正确的值
- python - 熊猫 to_excel 是压倒一切的价值观
- android - 导航资源显示未找到 NavHostFragments
- swift - 从下拉菜单中选择一个选项并将其放入特定位置的数组
- angular - SPA docker windows 容器的 Azure 管道构建失败