javascript - How to use react-select with react-bootstrap to get the values - Stack Overflow

admin管理员组

文章数量:1329013

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

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

• javascript
• reactjs
• styles
• react-bootstrap
• react-select

Share Improve this question Follow edited Mar 17, 2021 at 4:49 bonnegnu asked Mar 17, 2021 at 4:20 bonnegnubonnegnu 19544 silver badges1212 bronze badges 8

• 1 Not entirely clear what you're trying to acplish to be honest. Would be cool if you could put your code into a Sandbox and then point to specific behavior you want to add/fix. – codemonkey Commented Mar 17, 2021 at 4:30
• thanks for your answer, i did it there: codesandbox.io/s/elegant-fast-jz5ng?file=/src/App.js – bonnegnu Commented Mar 17, 2021 at 4:42
• what I need is the Select to be patible with the Form.Control for it to render and to be able to get the selected data in the same object. – bonnegnu Commented Mar 17, 2021 at 4:44
• The sandbox is currently broken. Is that something you can't fix or you meant to fix it? – codemonkey Commented Mar 17, 2021 at 4:45
• is something that I fixed with: <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> – bonnegnu Commented Mar 17, 2021 at 4:47

 |  Show 3 more ments

1 Answer 1

Sorted by: Reset to default 5

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

本文标签： javascriptHow to use reactselect with reactbootstrap to get the valuesStack Overflow