首页 > 解决方案 > 添加搜索以选择 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,
    };

标签: reactjsselectautocompletereact-bootstrap

解决方案


推荐阅读