react-select

问题 I have a React app and I want to replace the input bar of the Webchat with my own select element (I'm using react-select). Here is the select element under the webchat: return ( <div className="WebChat" > <ReactWebChat //WebChat className={ `${ className || '' } web-chat` } directLine={ this.createDirectLine(token) } store={ store } styleSet={ styleSet } /> <Select //my select element autoFocus="true" className="basic-single" classNamePrefix="select" defaultValue={'default'} isClearable=

问题 I am using react-select and the creatable function that allows you to create a new select option - just type in the select/input field on example. When you type in the first custom option it defaults into a group called "new Group". When you create a 2nd custom option this should overwrite the first in the new group. However the group name disappears. This is the incorrect code that results in that behavior... if (this.state.hasCreatedOption) { options[this.state.hasCreatedOption] = newOption

问题 I am using AsyncSelect and I would like to hide the arrow-down button on the right, the one that display the list of options. It can make sense when there are default options. But it my case I have none, so that button makes no sense it my situation. Is there a way to remove/hide it, when in async mode and there no default options ? Below is the code <AsyncSelect placeholder="Search ..." cacheOptions defaultOptions={false} value={this.state.currentValue} // Default to null loadOptions={this

问题 I am using AsyncSelect and I would like to hide the arrow-down button on the right, the one that display the list of options. It can make sense when there are default options. But it my case I have none, so that button makes no sense it my situation. Is there a way to remove/hide it, when in async mode and there no default options ? Below is the code <AsyncSelect placeholder="Search ..." cacheOptions defaultOptions={false} value={this.state.currentValue} // Default to null loadOptions={this

问题 I need to create new option with label "Ostatni" while filtering if there are no options left. I tried to do it by customising MenuList and NoOptionsMessage , but nothing works. Is there any way? NoOptionsMessage = props => ( <components.NoOptionsMessage {...props} children={<components.Option {...components.Option.defaultProps} data={{ value: 37, label: 'Ostatni' }} />} /> ) 回答1: You can achieve your goal using filterOption function like the following code: class App extends React.Component

问题 In my react-select drop-down, the labels are hundreds of characters long. In the Control chips, I would like to show a shorter version of what's in the drop-down. Is this possible? Edit: I want to set the text of the chip, not pixel width. 回答1: SOLUTION 1 You can custom the style of the control chips when using the multiple value Select with the props styles like the following example: const customStyles = { multiValue: (base, state) => ({ ...base, // set all chips to a maximum of 100 pixels

问题 I'm using react-select and react-final-form for conditional dropdowns, where options for the second select are provided by a <PickOptions/> component based on the value of the first select (thanks to this SO answer). Here is the component: /** Changes options and clears field B when field A changes */ const PickOptions = ({ a, b, optionsMap, children }) => { const aField = useField(a, { subscription: { value: 1 } }); const bField = useField(b, { subscription: {} }); const aValue = aField

问题 I have been trying to use react-select-fast-filter-options by passing props.options, but the filtering does not happen. All the options are getting rendered but the filter doesn't work. I am also getting a warning: Warning: getDefaultProps is only used on classic React.createClass definitions. Use a static property named defaultProps instead. This is how I am trying to use the fast-filter: import React, { Component } from 'react'; import VirtualizedSelect, { Value } from 'react-virtualized

问题 I have a stateless React function to render a react-select Select to a form. Everything else works nicely with redux-form except when redux-form is reset. I need to reset the form manually after successful post. onChange and onBlur change the redux-form value correctly when Select has a value change. When I reset the redux-form, the redux-form value is cleared but the Select will have the old value. function SelectInput(props) { const { input, options, label } = props; const { onChange,

问题 I don't know whyreact-select is clearing what I am typing after the second or third character. Based on my log the state had been updated correctly. I am thinking it could be that the operations happen async but even if that were the case after the update I would expect the text on the select to be updated according to the state. Apart from that when selecting an option from the list and pressing enter it doesn't display the selection on the textbox but it does recognizes the selection as it