如何使用 react-select 和 react-bootstrap 来获取值

Question

I'm developing an App in ReactJS and I have the following code:

import React, { useState, useEffect } from "react";
import {Form } from "react-bootstrap";
import Select from "react-select";

const App = () => {

    const [validated, setValidated] = useState(false);

    const [select, setSelect] = useState({
        name: "",
        category: ""
    });

    const handleChange = e => {
        const {name, value} = e.target;
        setSelect(prevState => ({
        ...prevState,
        [name]: value
        }));
    };

    const [data, setData] = useState([]);
    ...
    /* get data */
    ...

    const categories = data.map((item) => ({ value: item.id, label: item.Name }));

    return (
        <div className="app">
            <Form noValidate validated={validated}>
                <Form.Row>
                    <Form.Group as={Col} md="4" controlId="validationCustom01">
                        <Form.Label>Name</Form.Label>
                        <Form.Control
                            required
                            name="name"
                            type="text"
                            placeholder="Name"
                            onChange={handleChange}
                        />
                        <Form.Control.Feedback type="invalid">Check!</Form.Control.Feedback>
                        <Form.Control.Feedback>Ok!</Form.Control.Feedback>
                    </Form.Group>
                    <Form.Group as={Col} md="4" controlId="validationCustom02">
                        <Form.Label>Category</Form.Label>
                        <Form.Control
                            required
                            name="category"
                            as="select"
                            placeholder="Category"
                            onChange={handleChange}
                        >
                        <Select
                                options={categories}
                                defaultValue={true}
                                onChange={handleChange}
                                name="category"
                                id="search-select"
                            />
                        </Form.Control>
                        <Form.Control.Feedback type="invalid">Check!</Form.Control.Feedback>
                        <Form.Control.Feedback>Ok!</Form.Control.Feedback>
                    </Form.Group>
                </Form.Row>
            </Form>
        </div>
    );
}
        
export default App;

And I want to be able to use react-select together with react-bootstrap as shown above. I need the Select component to adapt to the code so that I can use the react-bootstrap validation and have all the data selected/entered to be able to insert it, I need to pass those as follows, as an example:

console.log(select);

{name: "", category: ""}
name: "Name"
category: "Category"
__proto__: Object

How can I do it? I need it because otherwise I have to use

<Form.Control
    required
    name="category"
    as="select"
    placeholder="Category"
    onChange={handleChange}
>
<option hidden value="" selected>Select</option>
    {
        categories.map(elem => {
            return <option  ... >Name</option>
        })
    }
</Form.Control>

and the select remains without style.

Thanks!

Answer 1

I am assuming you simply want to use react-select in your app. This should be pretty straightforward. I have created a dedicated element for you that uses react-select:

const SelectBox = ({ options }) => {
  const [optionSelected, setSelectedOptions] = useState([]);

  const handleChange = (selected) => {
    setSelectedOptions(selected);
  };

  return (
    <Select
      options={options}
      isLoading={!options}
      closeMenuOnSelect={true}
      onChange={handleChange}
      value={optionSelected}
      name={"your_select_name"}
    />
  );
};

You can just render it like so:

...
<SelectBox options={categories} />
...

Sandbox:https://codesandbox.io/s/upbeat-torvalds-kzcug?file=/src/App.js