标签: react-select

无论我做什么，我都无法更改选择的宽度。它总是保持不变，一些默认宽度（比如大约 75 像素）。

const Container = styled('div')`
  width: 100%;
  height: 100%;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
`;
const selectStyles = {
  valueContainer: base => ({
    width: 300,
  }),
  group: base => ({
    width: 300,
  }),
  container: base => ({
    width: 300,
  }),
  control: base => ({
    width: 300,
  }),
  singleValue: base => ({
    width: 300,
  }),
  input: base => ({
    width: 300,
    color: theme.palette.text.primary,
    '& input': {
      font: 'inherit',
    },
  }),
}

return (
  <SplitPane split='horizontal' defaultSize={260}>
    <Paper …

我很新ReactJS，我正在尝试创建一个带有值列表的组件（应该从 API 中获取）并且应该允许搜索。

https://codesandbox.io/s/v1v1xp1xn3

上面的例子工作正常，但它使用本地数据。如何与远程数据集成。每次按下按键时，它都应该点击 API 并获取新数据。

我正在使用 React-Select 2.4.2 版。在 iOS Chrome、Firefox、Safari 上测试。

我已经阅读了文档，但找不到正确的道具来传递这种情况。

我希望菜单显示在移动设备上，而不是显示在键盘或任何 iOS 原生页脚上。当然，切换 isDisabled 不起作用，因为它禁用了整个输入和选择菜单。

将“可搜索”道具翻转为 false 实际上会禁用键盘，但在 Safari 和 Firefox 上显示“完成”的页脚，在 Chrome 上显示“X”。

理想情况下，我可以只禁用输入，但仍然允许触摸选择选项。

示例代码：

    <Select
        value={selectedOption}
        options={selectOptions}
        onChange={handleOptionSelect}
        placeholder={placeholderText}
        isDisabled={false} {/* bool toggles affect entire plugin */}
        blurInputOnSelect={true} {/* don't want any input/keyboard on mobile */}
        readonly={true} {/* tried, didn't work */}
        searchable={false} {/* disables keyboard, but still shows iOS footer with "Done" button in Safari and Firefox, and an "X" in Chrome, and zooms in when touching …

有什么方法可以更改选定的值组件设计，在我的选项菜单中，我显示 CscId 和 CscDesc 但是当我选择该选项时，我只想显示 CscId。有什么方法可以更改选定的值组件吗？我用谷歌搜索了这个，已经花了 1 天。请帮我。

这是我的反应选择

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

const costcenterselect = ({ value, onChange, id, datasource }) => {    
  const formatOptionLabel = ({ CscID, CscDesc }) => (            
    <div style={{ display: "flex"}}>
      <div style={{width:'40%'}}>{CscID}</div>                
      <div>{CscDesc}</div>                
    </div>
  );  

  return (
    <div>
      <Select 
        id={id}
        menuIsOpen={true}    
        formatOptionLabel={formatOptionLabel}
        getOptionValue={option => `${option.CscID}`}
        options={datasource}
        onChange={onChange}
        defaultValue={value}        
      />
    </div>           
  )
}

export default costcenterselect;

如何更改反应选择中所有元素的悬停？

<Select
    name="colors"
    options={colourOptions}
    className="basic-multi-select"
    classNamePrefix="select"
  />

源主机：https : //codesandbox.io/s/react-codesandboxer-example-8iq7b

我正在尝试实现这个获取用户选择值的示例，但使用的是异步选择版本。

我想获得用户选择的值，但是通过 react-select 上的文档并不清楚该怎么做。如果您将 state 设置为等于 inputValue，那么只要您单击“提交”按钮，inputValue 就会被清除。你回来

" "

代替

user selected value

我不确定如何使用异步选择组件获取用户选择的值。我的 API 数据已成功填充和过滤建议框，但我不知道如何获取所选值。

我尝试了多种方法，最后尝试使用上面链接中的 refs 方法，但存储的值显示为空。而不是存储用户选择的值。这是我损坏的代码和盒子的链接。

任何人都可以帮助或指出我正确的方向吗？

编辑

如果将来有人遇到这个问题，这里是一个工作演示的链接。

我曾经react-select允许用户从选项列表中搜索/过滤。但是，搜索中不包括组标签。只是想知道是否有任何方法可以在搜索中包含组标签。

在下面的屏幕截图中，搜索“COLOR”时未显示组标签“COLORECTAL”及其选项。

是否可以动画打开和关闭菜单？菜单节点在打开/关闭时被删除或附加到 DOM 树，因此这会干扰 css 动画。有解决办法吗？

如何禁用反应选择上的输入？那可能吗？我只是希望它是一个下拉菜单

<Select
    placeholder="Action"
    className="col-3 mt-3"
    value={orderStatusInput}
    onChange={this.onOrderStatusChange}
    options={orderStatusOptions}
/>

我正在尝试使用react-select并拥有以下代码：

import React, {useState} from 'react';
import LanguageChange from '../../../Icons/LanguageChange';
import Select, { ValueType } from 'react-select';

type OptionType = {
    value: string;
    label: string;
  };


export const LanguageSelector = () => {
    const languageOptions: OptionType[] = [
        { value: 'English', label: 'EN' },
        { value: 'German', label: 'DE' },
        { value: 'French', label: 'FR' },
      ];
    const [selectedOption, setSelectedOption] = useState<ValueType<OptionType>>(languageOptions[0]);
    const handleChange = (option: ValueType<OptionType>) => {
    setSelectedOption(option);
  };

    return (
        <LanguageChange>
            <Select
                value={selectedOption}
                onChange={setSelectedOption}
                options={languageOptions} …