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.iocomponentsforms#form-control-props。

其中有一个道具 "如"。见下面的例子。

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

}