react-bootstrap 如何使用自定义表单控件组件

Question

I need to add select input in my form, but there are too many options, so the default way to do it looks really ugly(

<Form.Control as="select">
    {props.options.map(
        (o) => <option>{o}</option>
    )}
</Form.Control>

So I've decided to use react-bootstrap-typeahead because it's already being used in my project and it supports search. However, it didn't work properly in that case.

<Form>
    <Form.Group>
        <Form.Label>Provider</Form.Label>
        <Form.Control
            as={Typeahead}
            id="id"
            options={props.options}
         />
    </Form.Group>
</Form>

It looks like this:

Might I've done it not properly, but I can't figure out how to do it in another way(

Answer 1

https://react-bootstrap.github.io/components/forms/#form-control-props

Ther has a props "as". See exemle bellow.

export default function Input(props) { 

 const CustomFormControl = React.forwardRef(({ children, onChange}, ref) => (
    <>
     <p>Insert your elements for yout form</p>
     <p>{props.test}</p>
    </>
  ));

return (
    <>
        <Form.Control
        as = {CustomFormControl}
        test = {"hellow world"}
        /** and here u can inser the props you need **/
        />
    </>

}