react-select

来源： https://stackoverflow.com/questions/49299042/react-select-how-to-keep-dropdown-open-when-styling-in-inspector

问题 Using react-select v2, I want to show and focus on the Select element when the user hits a certain key. Following are some things I've tried or paths I've gone down. When I set a ref to the Select element and try to call .focus on it, it says no focus function is found. Perhaps I should somehow get a child element of it and then call focus on that? There doesn't seem to be any prop I can pass that will trigger a focus function. There is an openOnFocus but not a focusOnOpen . The only thing I

问题 I have a searchable react-select field where I'm passing HTML into the label value. Searching works prior to adding HTML, but after and understandably, it no longer works. Is there something specific I can do to repair the searchability while passing HTML to the label? The answer to my original question (can you pass HTML to the label) was answered by this post: react-select escapes html chars [ { value: 'foo', label: <span dangerouslySetInnerHTML={{ __html: 'bar & foo' }} /> }, ] 回答1: If you

问题 I am trying to use a custom component as an input field in react-select. Since I need validation I am trying to use HTML5 oninvalid ( onInvalid in JSX) for my input tag and set the custom message for oninvalid . However I am unable to pass the message as a prop to the component that I am setting in select. Below is my code. Input.js import React from "react"; import { components } from "react-select"; export default class Input extends React.Component { constructor(props) { super(props); }

问题 I am wondering if react-select could show html in rendered options. For example if fetched ajax option has <b>text</b> , I would like to see text as bold in the dropdown menu instead of seeing <b>text</b> . I read the documentation and I didnt find any option for this. Thank you 回答1: You can rely on the optionComponent prop of react-select and the dangerouslySetInnerHTML feature of React And give to optionComponent a component like this const MyOptionComponent = props => <span

问题 Is it possible to use react-select directly from the browser without bundlers nowadays? The most recent version that I found to be able to do so was 2.1.2: How to import from React-Select CDN with React and Babel? They used to provide react-select.min.js in the umd format back then. Nowadays they have react-select.browser.esm.js and react-select.browser.cjs.js (https://unpkg.com/browse/react-select@3.1.0/dist/), but I couldn't get any of those working from the browser. 来源： https:/

问题 In React-Select V2, we're able to create option groups by passing an options param like so: options = [ { label: 'Group', options: [ { label: 'Option 1', value: '1' }, { label: 'Option 2', value: '2' } ]} ] I need to be able to go another layer deep, something like: options = [ { label: 'Group', options: [ { label: 'Option 1', value: '1' }, { label: 'Option 2', options: [ { label: 'Option 2-a', value: '2a' }, { label: 'Option 2-b', value: '2b' }, ]} ]} ] Which would display the options

问题 In React-Select V2, we're able to create option groups by passing an options param like so: options = [ { label: 'Group', options: [ { label: 'Option 1', value: '1' }, { label: 'Option 2', value: '2' } ]} ] I need to be able to go another layer deep, something like: options = [ { label: 'Group', options: [ { label: 'Option 1', value: '1' }, { label: 'Option 2', options: [ { label: 'Option 2-a', value: '2a' }, { label: 'Option 2-b', value: '2b' }, ]} ]} ] Which would display the options

问题 I am using this react-select : https://github.com/JedWatson/react-select The format for options data that they require is: const options = [ { value: 'chocolate', label: 'Chocolate' }, { value: 'strawberry', label: 'Strawberry'}, { value: 'vanilla', label: 'Vanilla' } ]; My array is set up differently as follows: const columns = [ { name: 'OrderNumber', title: 'Order Number' }, { name: 'strawberry', title: 'Strawberry' }, { name: 'vanilla', title: 'Vanilla' } ] I am not able to change my

问题 I making a select option using react-select following this Installation and usage example code. There was an object of array to store the option like this: const options = [ { value: 'chocolate', label: 'Chocolate' }, { value: 'strawberry', label: 'Strawberry' }, { value: 'vanilla', label: 'Vanilla' } ]; Now, I want to make it dynamically to store the value from other data and make it iterate on the object. like this: const options = [ { value: flavor, label: flavor }, ]; The flavor on the