标签: react-select

我一直在使用 React Select，我只是想知道为什么当我尝试修改下拉列表中的选项时箭头键导航不起作用。

我的实现如下。

<Select
    styles={_customStyles}
    isClearable={false}
    isSearchable={true}
    options={sitesOptions}
    onChange={handleChange}
    value={selectedOption}
    menuIsOpen={true}
/>

_customStyles如下，

const _customStyles = {
        control: (base, state) => ({
            ...base,
            boxShadow: 'none',
            minWidth: '242px',
            zIndex: 9999,
            border: '1px solid lightgray', // default border color
            '&:hover': { borderColor: 'gray' } // border style on hover
        }),
        option: (provided, state) => ({
            ...provided,
            backgroundColor: state.isSelected ? '#d46514' : 'transparent',
            ':focus, :hover, :active, :visited': {
                backgroundColor: state.isSelected ? '#d46514' : '#5a61691a'
            }
        })
    };

如果我从 _customStyles 中删除选项对象，我就可以浏览下拉列表中的列表。换句话说，我可以导航，但它是透明的。我不知道当前选择的项目，但当我点击“Enter”时，该选项被选中。

为什么背景颜色没有应用于元素？它是透明的。当我删除选项时，将应用默认颜色并且工作正常。 …

我有一个反应选择组件来在 api 上执行搜索，还有一个按钮来开始搜索。

我尝试在单击按钮后设置 menuIsOpen={true} 但它破坏了原始的焦点模糊行为，菜单不再关闭模糊。尝试在输入上设置 .focus() 它没有打开菜单。

当前的原始行为菜单在焦点时打开，在模糊时关闭，我想保留这一点，而且我想在单击按钮后打开菜单。

因此，我正在研究可能将 react-select 用于需要多选的项目。但是，多选示例会随着选择更多项目而不断向下扩展。如果下拉列表有一堆选项可供选择（比如 100），这将不起作用。react-select 库中有没有办法让值变成“Xyz & 5 more”或类似的东西？

import React, { Component } from 'react'
import Select from 'react-select'

const options = [
  { value: 'chocolate', label: 'Chocolate' },
  { value: 'strawberry', label: 'Strawberry' },
  { value: 'vanilla', label: 'Vanilla' },
  { value: 'cherry', label: 'Cherry' },
  { value: 'foo', label: 'Foo' },
  { value: 'bar', label: 'Bar' }
]

const MyComponent = () => (
  <Select
    options={options}
    isMulti
    className="basic-multi-select"
    classNamePrefix="select"
  />
)

在react-select的文档中，有一个键列表，但仅从标题很难知道哪些键映射到选择组件中的哪些元素。有没有地方的指南可以让这一点更清楚？

https://react-select.com/styles#style-object

使用 react-select，我想了解如何获取单击选定值（多个）时的事件。

我正在使用具有多选功能的 react-select ( https://react-select.com/home )。很有魅力，但我想让值可点击/可切换以更改颜色/状态（而不是添加/删除）。最后以灰色/颜色显示它们以指示标记状态并将底层状态用于后续代码。有什么方法可以实现这一目标，如果有，如何实现？

我有一个使用 react material ui 的 react 应用程序，我使用的是自动完成react-select示例，您可以在此处找到。

https://material-ui.com/components/autocomplete/

当SELECT中的项目数量大时，例如左右2500左右〜它滞后并变得无法使用。

我修改了原始演示以提出长度为 2500 的建议来填充选择。

const suggestions = [];
for (let i = 0; i < 2500; i = i + 1) {
  suggestions.push({ value: i, label: `Option ${i}` });
}

请参阅我的问题的以下演示示例。

https://codesandbox.io/s/material-demo-vp59j

当您单击第一个选择器时，它非常滞后。

如何动态加载多选？我使用 react-select 来实现 MultiSelect。

我的努力

在 componentDidMount() 中，我获取了一个数组，我想在我的多选中显示/加载它；然后将响应存储在状态中。

现在，我试图从那个状态中获取价值，但我没有得到那个价值。

我的代码

state= {Category: []}

// that category contain this values
//0: {categoryid: "1", categoryname: "Select Category"}
//1: {categoryid: "2", categoryname: "Abc"}


componentDidMount() {
    fetch("http://myURL//file.php", {
      method: "POST",

      headers: {
        Accept: "application/json",
        "Content-Type": "application/json"
      },
      body: JSON.stringify({})
    })
      .then(response => response.json())
      .then(responseJson => {
        this.setState({ Category: responseJson });
        //  If server response message same as Data Matched

        console.log(this.state.Category);
        window.parent.location = window.parent.location.href;
      })
      .catch(error => {
        console.error(error);
      });
  }

//this code is not …

我有一个按钮，单击该按钮时，所有内容都是透明的。

是否可以手动设置文本颜色？不是背景色！

我希望字体上的黑色不透明。

我的代码：

import React from 'react';
import DatePicker from "react-datepicker";
import Select from 'react-select';

import "react-datepicker/dist/react-datepicker.css";
import 'react-datepicker/dist/react-datepicker-cssmodules.css';

const options = [
    { value: 'chocolate', label: 'Chocolate' },
    { value: 'strawberry', label: 'Strawberry' },
    { value: 'vanilla', label: 'Vanilla' },
];



class Test extends React.Component {

    state = {
        startDate: new Date(),
        selectedOption: null,
    }

    constructor() {
        super();

        this.state = {

        };
    }

    handleChange = date => {
        this.setState({
            startDate: date
        });
    };

    handleChange = selectedOption => { …

我们有一个用例，我们必须根据选择的选项数量为多选下拉列表呈现多个不同版本的值容器。下面的代码片段显示了其中一种情况。这个的另一个版本呈现一个<SingleValue />而不是占位符。

<ValueContainer {...props}>
    <Placeholder {...props}>
    {!props.selectProps.inputValue && `${length} selected`}
    </Placeholder>
    {children[1]}
</ValueContainer>

这似乎运行良好，但是我们在选择其中一个选项时会丢失键盘导航。我是否忘记传递某些道具或裁判？

可以在此处找到自定义 ValueContainers 的键盘导航示例：https ://codesandbox.io/s/rjvkzk1nn?from-embed

所以我正在为我的网站开发一个搜索栏，我在使用其中一个组件react-select时遇到了一些麻烦。下面是一些示例代码

const baseOptions = [
      { label: 'Users', options: 
      [
      ]
      },
      { label: 'Pages', options: 
      [
      ]
      },
      { label: 'Search Google Index', value: 'search_google_index', type: "google_index" },
      { label: 'Search Bing Index', value: 'search_bing_index', disabled: 'yes' },
    ]

  handleSearchChange = selectedOption => {
    this.setState({
      selectedOption,
    }, () => {
    console.log(`Option selected:`, this.state.selectedOption);
    switch (this.state.selectedOption.type) {
      case "user":
      window.location = "/@" + this.state.selectedOption.label
        break;
      case "google_index":
      console.log("Searching google index");

            /*Here is where I need to catch the …