admin管理员组文章数量:1330167
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!
Share Improve this question edited Mar 17, 2021 at 4:49 bonnegnu asked Mar 17, 2021 at 4:20 bonnegnubonnegnu 1954 silver badges12 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
1 Answer
Reset to default 5I 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
版权声明:本文标题:javascript - How to use react-select with react-bootstrap to get the values - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742241185a2438844.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论