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

Question

我需要在我的表单中添加选择输入，但是选项太多，所以默认的方式看起来真的很难看（

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

所以我决定使用react-bootstrap-typeahead因为它已经在我的项目中使用并且它支持搜索。 但是，在这种情况下它不能正常工作。

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

它看起来像这样：

可能我做得不对，但我不知道如何以另一种方式做到这一点（

Answer 1

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

那里有一个道具“as”。 见下面的例子。

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 **/
        />
    </>

}