react-select

问题 I am using React-Select. Currently I am fetching data from elasticsearch and setting it to state: var new_titles = [] body.hits.hits.forEach(function(obj){ // looping through elasticsearch new_titles.push({value: obj._source.title_id, label: obj._source.title_name}) }) this.setState({titleResults: new_titles}) Later I am using this.state.titleResults and passing it into my React-Select component: <Select autofocus optionComponent={DropdownOptions} options={this.state.titleResults} simpleValue

问题 I'm working on a permissions system to let users control who can access/comment/edit a resource, much like what you can find on Google Drive. I'm using a React-Select multi to let the owner of the resource pick users he wants to give access to the resource to. When I click on an option displayed by react-select, I want this option to be added to my list of allowed users (a list that is handled by another component). This part works, I just used an onChange handler on the select (as you can

问题 I want to have optgroups in my react-select list, but it doesn't seem to be documented anywhere. I have the following structure, which I pulled from a comment in https://github.com/JedWatson/react-select/issues/59: render() { const options = [ { label: "Group 1", children: [ { label: "Group 1, option 1", value: "value_1" }, { label: "Group 1, option 2", value: "value_2" } ] }, { label: "A root option", value: "value_3" }, { label: "Another root option", value: "value_4" } ]; return <Select

问题 I am using react-select and I don't want to hard code the options which should be displayed, but options is data I am fetching from an api. I can't really find anything and what I was trying to do doesn't work as nothing gets displayed. Anyone knows? Thanks!!! api.js: export function availableCities() { return axios.get('/cities').then(function (response) { return response.data; }) } Component: import Select from 'react-select'; import {availableCities} from '../utils/api.js'; class App

问题 Using React-Select (version 2) I would like to have custom designed (select) options. The documentation suggests that Replacing Components would be a method that I could use to achieve this. Unfortunately I'm unable to find examples that show implementations of this feature. Is there anyone that could present to me usage of this feature whereby you would have a simple custom option (perhaps a label and value that also includes an SVG graphic to the left of each option label). Many thanks in

问题 I am working on react-select library and facing some issues, I am using redux-form library and importing <Field /> component from it. So that I can submit the values via form to service. Below mentioned code works fine, when I use default <Select> from react-select. I can able to select the values from the drop down and the value will be selected even on focus out the value will remain. But selected value is not submitting via form due to redux-form that's why I am wrapping <Select />

问题 import React, { Component} from 'react'; import Select from 'react-select'; import 'react-select/dist/react-select.css'; const partsType = [ {value: 'front_parts', label: 'Part Condition-Front'}, {value: 'left_parts', label: 'Part Condition-Left'}, {value: 'back_parts', label: 'Part Condition-Back'}, {value: 'right_parts', label: 'Part Condition-Right'}, {value: 'top_bottom_parts', label: 'Part Condition-Top/Bottom'}, {value: 'glass', label: 'Glass Condition'}, {value: 'electrical_parts',

问题 I'm trying to figure out how I can utilize the custom components in react-select to render a dropdown that has items with subtext. I've looked at each one of the components on: https://react-select.com/components and not sure which one would best fit my needs. From looking at the list of components, I believe the option component is meant for something like that and would probably work but i'm not sure. Can someone validate my thought? 回答1: React-select V2 solution: You are absolutely right,

问题 I wanted to use react-select and ran into a whole array of issues after I changed the page background color from white to custom. (The issues aren't so evident on the white background as on react-select's github page) I'm doing the above through styles prop as the className prop wouldn't work properly. Here is the styles prop. const colourStyles = { control: styles => ({ ...styles, backgroundColor: '#023950', color: 'white', border: 0 }), option: (styles) => { return { backgroundColor: '

问题 Not just focusing, but to actually open the component and display options. I know this isn't simple on a regular select component (see Is it possible to use JS to open an HTML select to show its option list? ), but perhaps it is still possible with React-Select. 回答1: In react-select you can control the opening of the menu with menuIsOpen props. to achieve your goal I would use a combination of menuIsOpen , onInputChange and onFocus like this: class App extends Component { constructor(props) {