如何使用 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>

并且选择仍然没有样式。

谢谢！

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