react-select

问题 Having a problem with using className prop. What's happening for me is that only the parent div gets the class and the children divs don't. As a result, they end up having background color white instead of the override color. <Select className="games-dropdown-2" defaultValue={colourOptions[0]} name="color" options={colourOptions} /> Below is the css class .games-dropdown-2 { background-color: #023950; color: #FFFFFF; padding-left: 15px; width: 93%; } Another problem is that the child div

问题 I'm using react-select in my project and I'm using it within a map like that: renderItems() { this.props.items.map(item => ( <Select id="options" value={this.state.optionSelected} onChange={this.onChangeOption} options={this.showOptions()} /> ); } It show correctly all my options for all my items but now I can not get rid about the select... Basically when I select an option on a single item, that option is changing for all items... This is what i did so far: onChangeOption(e) { this.setState

问题 I am using react-select for autocomplete and option related field. When i select the option it passes whole that option object as {value: 'abc', label: 'ABC'} but i wanted only to pass the value as a string not the object. Thus, i used getOptionValue but it is not working as expected. This is what I have done <Field name='status' component={SearchableText} placeholder="Search..." options={status} styles={styles} getOptionLabel={option => option.label} getOptionValue={option => option.value} /

问题 I'm trying to use React Virtualized Select combined with react-select-fast-filter-options react-virtualized-select works well for me, but somehow I can not get react-select-fast-filter-options to work after following all steps in Git guide, after entering some value to select input, I got no results at all. I ve created codesnippet in Code Sandbox for this issue https://codesandbox.io/s/v34qnr9w0 It does not work if labelKey is content , but when you change labelKey to label (default value),

问题 We're migrating an application from Angular to React. This is a gradual, incremental replacement, so it's critical that the user experience does not change. We decided to go with react-select as our replacement for UI-Select. So I'm tasked with creating the implementation. I've been able to replicate nearly all functionality so far, except some final styling and function on the control. I am attempting to separate the inputValue filter from the root Control and move it into the MenuList . I

问题 I'm trying to figure out how to get a react-select V2 component which is set to isMulti to hide the selected values once they exceed the ValueContainer 's width (instead of breaking to a new line and expanding the component's height). I tried achieving this (with no luck) by applying the following style to the valueContainer : valueContainer: base => ({ ...base, overflowX: "hidden" }) Here is an example of the unwanted behavior (my goal is to get the 3rd value to be partially hidden or

问题 I'm using react-select in my app and it works perfectly but I need a feature when user creates a custom tag, they will edit it which is a valid feature.But in react-select there's no option to edit the custom tag. I really need this feature in my app, so I have started to do it on my own to edit the custom tags and somehow managed to get it like below : This works for a single custom tag and I need this to work for all custom tags .But I'm struck when editing second custom tag, the input

问题 I built my own React select component and would like to have an option to set the default value to be disabled The component basically looks like this: <select id={this.props.id} name={this.props.name} value={this.props.value} defaultValue={this.props.default} onClick={this.handleFieldClick} onChange={this.handleFieldChange} > <option value="" disabled={this.defaultDisabled ? true : false} >{this.props.defaultLabel}</option> { Object.keys(this.props.options).map((val, i) => ( <option key={i}

问题 I'm using React Select v2 in my project with Styled Components and I need to be able to turn the arrow indicator upside down when the menu is open, which was supported in v1. I kinda managed to do it by doing this: css` &.react-select__control--is-focused { & .react-select__indicators { & .react-select__dropdown-indicator { transform: rotate(180deg); } } } `; Problem is that, if I press the arrow to open the menu and click on it again to close it, the arrow stays upside down because the

问题 I am trying to display a popover on click over a react-select selected value element as follow : My issue happens when I click on the popover trigger, the dropdown opens and the popover too... I just want to open the popover, I tried e.nativeElement.stopPropagation , e.stopPropagation , e.preventDefault and so on without success. Here is a sandbox If you want to know how I did this and how to reproduce the issue. https://codesandbox.io/s/pjv7vmlv3j Thanks for you help 回答1: Well I found a way