I am a "react-bootstrap with hooks" first-timer and I am creating a simple form. I am following the react-bootstrap documentation's example and I am running into a problem with select/option form elements. Regular text input fields render normally without an error. Select statements seem to blow things up.
Here is my code:
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>
</>
)
}
Here is the yarn error message:
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`.
And from the console:
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
Do I need to install an additional module, or is it something more obvious?
而不是Form.Select
,您可以使用:
<Form.Control as="select">...</Form.Control>
Form.Select appears to be a beta feature that isn't implemented in current the production version of bootstrap-react. That is the reason why the above code wasn't working.
In order for "submit" to show it as a json you need to provide the "name" parameter. Like this:
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>
</>
)
}
Full code will be look like as defined below
<Form.Group>
<Form.Label>Status</Form.Label>
<Form.Control as="select">
<option>Active</option>
<option>Inactive</option>
</Form.Control>
</Form.Group>
Instead of using the following code:
<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>
Use this instead
<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>
As of 7/21/22 it is still in beta and is prone to error
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.