react-select

问题 I'm using react-select with react-final-form and I need to have two selects, where the selected option in the first select dynamically sets the options for the second select. For example, when option One is selected in the first select, the second select gets options One A and One B. These selects are used in an array. Here is my codesandbox with initial setup https://codesandbox.io/s/react-final-form-field-arrays-e4mm6?fontsize=14. I've found two similar examples, but I don't know how to

问题 I have a react select component that isn't recognizing the default value option. The code looks like this: renderPlans(){ if(this.props.plans){ let list = this.props.plans.map(item=>{ return ({label:item.description, value:item.id}) }); return( <Select name= "tile-plans" value= {this.state.selected} classNamePrefix='react-select-container' options={list} defaultValue={list[0]} onChange={(e) => { e ? this.setState({selected: e.value}) : this.setState({selected: ''}) }} /> ) } } from everything

问题 I used react-select in my application for showing select box. below is code of my select. <Select className="custom-form-control mb-2" name="organization_options" options={this.organizationOptions()} placeholder={false} onChange={this.handleChange.bind(this)} value={selectedValue === "" ? this.organizationOptions()[0] : selectedValue} /> Below are the options i already have in select box 0: {value: "62", label: "Dfdf"} 1: {value: "128", label: "Dfdfdsf"} 2: {value: "151", label: "Fgfdgdfh"} 3

问题 I used react-select in my application for showing select box. below is code of my select. <Select className="custom-form-control mb-2" name="organization_options" options={this.organizationOptions()} placeholder={false} onChange={this.handleChange.bind(this)} value={selectedValue === "" ? this.organizationOptions()[0] : selectedValue} /> Below are the options i already have in select box 0: {value: "62", label: "Dfdf"} 1: {value: "128", label: "Dfdfdsf"} 2: {value: "151", label: "Fgfdgdfh"} 3

问题 We have a use case where we have to render multiple different versions of the value container for the multiselect dropdown depending on how many options are selected. The code snippet below shows one of the cases. Another version of this renders a <SingleValue /> instead of placeholder. <ValueContainer {...props}> <Placeholder {...props}> {!props.selectProps.inputValue && `${length} selected`} </Placeholder> {children[1]} </ValueContainer> This seems to be working well, however we lose

问题 Link example website here In that website, I am looking how to select item (e.g "Green") in "Single" dropdown box and "Grouped" dropdown box. I tried to click to dropdown first and tried to find the element inside it to click but I can't Do you have any idea? and with Grouped dropdown I even couldn't find the xpath to click on it Thank in advance driver = webdriver.Chrome() driver.get("https://react-select.com/home") driver.maximize_window() driver.implicitly_wait(20) driver.find_element_by

问题 I can't find in the documentations how to use optionRenderer prop with react-select async (Select.Async) here is a question that already been answered, but the renderOptions is not being called at all here is my a snippet of my code: renderOption = (option) => { return ( <div> // for example: {option.label}: {option.value} </div> ) } <Select.Async placeholder={placeholder} loadOptions={(inputValue) => this.asyncLoadOptions(inputValue)} isClearable onChange={(value, e) => { this

问题 I can't figure out what prop to use to disable a Creatable React-select component, is it just missing? I tried the regular isDisabled prop but was unsuccessful. <CreatableSelect name="serviceOrders" className="hide-options" value={selectOptions()} isDisabled={headerLock} onChange={e => { this.handleHeaderChange( e, 'serviceOrders', ); }} placeholder="Type SO, then press enter..." multi /> I want to disable it for specific situations. 回答1: The isDisabled prop for Select components is

问题 I can't figure out what prop to use to disable a Creatable React-select component, is it just missing? I tried the regular isDisabled prop but was unsuccessful. <CreatableSelect name="serviceOrders" className="hide-options" value={selectOptions()} isDisabled={headerLock} onChange={e => { this.handleHeaderChange( e, 'serviceOrders', ); }} placeholder="Type SO, then press enter..." multi /> I want to disable it for specific situations. 回答1: The isDisabled prop for Select components is

问题 I am using react-select library to implement search and select functionality in my project. As a basic usage, I can only select the options returned after the search. It looks like this whose code is: <AsyncSelect onChange={(item) => _selectedItemChange(item)} loadOptions={loadItemOptions} placeholder='Start typing' /> Now, I want a button at the lower end of the select box so that I can do like 'Not found? Add New' type of stuff. Something like this. I also want that button's onClick