react-select

问题 I am trying to add an icon in front of the input element of react select. I am able to get the icon in placeholder but the problem with a placeholder is that when I select some data from the dropdown the placeholder icon gets removed. I need some help to get the icon in front of the Select statement. Here's the code of what I have achieved till now import React, { Component } from 'react' import Select, { components } from 'react-select' export default class InfluencersForm extends Component

问题 I am using react-select and just notice that when I already have value in the input field (either by user type or by choosing the option in menu list), then I blur the input then focus at it again - trying to edit my last input - its just start over from the beginning, not continue from the last character of the input. I just found this issue in the author's github. Its been raised from 2 years ago and still an open issue. Is there really no workaround to achieve this? 回答1: I recommend you to

问题 I'm using a react-select drop down to allow users to choose multiple options between A, B and C. Currently this works on the UI but when an option is de-selected, it is not removed from the array. Can anyone give me hints as to how this is done? (Example, A, B, and C are selected, then A is unselected, how can A be removed from the array?) var choice = []; const choices = [ {value: 'a', label: 'a'}, {value: 'b', label: 'b'}, {value: 'c', label: 'c'}, ]; handleChange = (selectedChoice) => {

问题 So what i need to do is have the search form of react-select not only react to id an value, but i also want it to be able to search for synonyms of the select options. For example in a unit of measures list: { "id": "MIN", "name": "minute", "synonym": "time" } I want to be able to type in "min", "minute" or "time" and end up with the selection "minute". I tried it with pushing another element into the array: mapUnitOfMeasure() { const results = [ ]; for(const c of measureUnits) results.push({

问题 I'm using a fork of React-Select for a project adding customized functionality. I'm trying to disable the dropdown from opening when a user clicks on one of the tags (When multi is set to true). So if a user clicks on one of the tags the dropdown menu won't open. I went over Value.js file to see if I could find the isOpen state triggered by clicking on the tags but couldn't find it. Here's a screenshot illustrating what I mean. 回答1: In case if used custom tag component ( valueComponent ) try

问题 I have dependent fields like this <List> <select> <option></option> <option></option> </select> <select> <option></option> <option></option> </select> <input /> </List> If I had 5 <List/> components.How do I add Select2 to each component.I googled online.But couldn't find any working solution. Code below for react-select .Getting error TypeError: event.target is undefined . var React = require('react'); var ReactDOM = require('react-dom'); var Select = require('react-select'); var Page =

问题 The new v2 react-select control is great, but by default is too large. Is there a (preferably) simple way to reduce the height to the same as a standard select control (using Bootstrap v3)? 回答1: React-Select v2 uses emotion CSS-in-JS so the new way to control style over the select components and sub-components is by passing a style object to the styles prop. You can also set a className to style with an external stylesheet. More/Better Info HERE CSS-in-JS way const customControlStyles = base

问题 I am trying to change the icon used for the react-select multi select indictor to a font-awesome icon, but it is not working. Any idea why? import React from "react"; import Select, { components } from "react-select"; import { colourOptions } from "./docs/data"; const Placeholder = props => { return <components.Placeholder {...props} />; }; const CaretDownIcon = () => { return <i className="fas fa-caret-down" />; }; const DropdownIndicator = props => { return ( <components.DropdownIndicator {

问题 I have a multi select drop down allowing my user to select multiple A, B and/or C options, using react-select. Each time one is selected, I want it to be added to a 'choice' variable to keep record. I have this working, but since I have to declare my variable first, it is holding 'null' inside the variable. How do I get rid of this? Code below. handleChange = (selectedChoice) => { this.setState({ selectedChoice }); for (var i =0; i < selectedChoice.length; i++) { var filter = null; filter +=

问题 React-Select with Formik is not loading the selected value in select componenet but I'm able to get values on form submission and validation also works with Yup Here is a codesandbox demo for the same - https://codesandbox.io/s/wild-violet-fr9re https://codesandbox.io/embed/wild-violet-fr9re?fontsize=14 import React, { Component } from "react"; import { Formik, Form, ErrorMessage } from "formik"; import * as Yup from "yup"; import Select from "react-select"; const debug = true; class