如何使用 react-select 和 react-bootstrap 來獲取值

Question

我正在 ReactJS 開發一個應用程序，我有以下代碼：

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;

而且我希望能夠將react-select與react-bootstrap一起使用，如上所示。 我需要Select組件來適應代碼，以便我可以使用react-bootstrap驗證並選擇/輸入所有數據以便能夠插入它，我需要通過如下方式，例如：

console.log(select);

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

我該怎么做？ 我需要它，否則我必須使用

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

select 仍然沒有風格。

謝謝！

Answer 1

我假設您只是想在您的應用程序中使用 react-select。 這應該很簡單。 我為您創建了一個使用 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"}
    />
  );
};

你可以像這樣渲染它：

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

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