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

}