为什么 Form.Select 在我的简单 react-bootstrap 应用程序中没有被识别，遵循 react-bootstrap 文档？

Question

我是一个“带钩子的反应引导程序”的初学者，我正在创建一个简单的表单。 我正在关注 react-bootstrap 文档的示例，但我遇到了选择/选项表单元素的问题。 常规文本输入字段正常呈现，没有错误。 选择语句似乎把事情搞砸了。

这是我的代码：

import { Form, Button } from "react-bootstrap";

export default function FormComponentName(props) {
    return (
        <>
            <h1>Search Form</h1>

            <Form>

                <Form.Group className="mb-3" controlId="searchState">
                    <Form.Label>State</Form.Label>
                    <Form.Select defaultValue="State...">
                        <option>State...</option>
                        <option value="1">One</option>
                        <option value="2">Two</option>
                        <option value="3">Three</option>
                    </Form.Select>
                </Form.Group>
               <Button variant="primary" type="submit">
                    Search Data
                </Button>

            </Form>


        </>
    )

}

这是纱线错误消息：

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of `FormComponentName`.

从控制台：

index.js:1 Warning: React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check your code at FormComponentName.js:14.
    at FormComponentName

我需要安装一个额外的模块，还是更明显的？

Answer 1

而不是Form.Select ，您可以使用：

<Form.Control as="select">...</Form.Control>

Answer 2

Form.Select 似乎是一个 beta 功能，在当前的 bootstrap-react 生产版本中没有实现。 这就是上述代码不起作用的原因。

Answer 3

为了让“提交”将其显示为 json，您需要提供“名称”参数。 像这样：

import { Form, Button } from "react-bootstrap";

export default function FormComponentName(props) {
    return (
        <>
            <h1>Search Form</h1>

            <Form>

                <Form.Group className="mb-3" controlId="searchState">
                    <Form.Label>State</Form.Label>


//The name of the param will become the key in your json


                    <Form.Select defaultValue="State..." name="myParameter">


                        <option>State...</option>
                        <option value="1">One</option>
                        <option value="2">Two</option>
                        <option value="3">Three</option>
                    </Form.Select>
                </Form.Group>
               <Button variant="primary" type="submit">
                    Search Data
                </Button>

            </Form>


        </>
    )

}

Answer 4

完整代码如下定义

 <Form.Group>
    <Form.Label>Status</Form.Label>
    <Form.Control as="select">
      <option>Active</option>
      <option>Inactive</option>
    </Form.Control>
  </Form.Group>

Answer 5

而不是使用以下代码：

                    <Form.Select className="text-center">
                        <option>Alfie-Lee Powell</option>
                        <option>Amir Conley</option>
                        <option>Barney Hirst</option>
                        <option>Ciaron Robinson</option>
                        <option>Claude Whyte</option>
                        <option>Ismael English</option>
                        <option>Pranav Smith</option>
                        <option>Tamanna Warner</option>
                        <option>Thierry Vaughn</option>
                    </Form.Select>

改用这个

                    <Form.Control as="select" className="text-center">
                        <option>Alfie-Lee Powell</option>
                        <option>Amir Conley</option>
                        <option>Barney Hirst</option>
                        <option>Ciaron Robinson</option>
                        <option>Claude Whyte</option>
                        <option>Ismael English</option>
                        <option>Pranav Smith</option>
                        <option>Tamanna Warner</option>
                        <option>Thierry Vaughn</option>
                    </Form.Control>

截至 22 年 7 月 21 日，它仍处于测试阶段，容易出错