标签: react-select

我正在尝试在我的react-native应用程序中实现搜索表单.对于它,我需要像react-select或select-2这样的东西,这两个工具都是为web系统制作的,我不知道将它用于本机应用程序是否是个好主意.

我已经尝试在react-native中安装和使用它,但这似乎不起作用.

我对 Selenium IDE 位置元素有疑问

这是链接： https: //jedwatson.github.io/react-select/

我用这个命令成功了：

Command: sendKeys
Target: css=div.Select-control input
Value: Victoria${KEY_ENTER}

但我不知道如何处理具有相同元素的下一个字段

<div class="Select-placeholder">Select...</div>

问题是如何使用 Selenium IDE 处理这个问题？

我在我的反应应用程序中使用react-select下拉组件.我发现了一个奇怪的问题,当用户开始键入以在react-select下拉列表中搜索项目时,搜索文本框会得到拉伸,而不是固定的下拉列表.

请看下面的图片.如何修复搜索文本框宽度以反应选择宽度？

我试图更改选择箭头的颜色和焦点对准的控件的颜色，但没有成功。有没有人使用样式组件来做到这一点？

文档中似乎没有提及它，我想将搜索限制为 n 个字符。

我可以通过向输入元素添加属性来在 Chrome 开发工具中成功尝试此操作maxlength，但我不确定如何告诉反应选择组件执行此操作。

谢谢

我想知道react-select是否可以在渲染选项中显示html。例如，如果获取的ajax选项有<b>text</b>，我希望在下拉菜单中看到粗体文本而不是看到<b>text</b>。

我阅读了文档，但没有找到任何选项。

谢谢

基本上我有两个下拉菜单。基于在一个下拉列表中选择的值，我想在另一个下拉列表中隐藏某些选项。

我尝试向选项对象添加一个 className 参数以及标签和值参数，并尝试将具有上述 className 的所有选项的显示设置为 none，但它没有将选项的 className 设置为我指定的选项。

[{'label':'x','value':'y',className:'hide'}]
.hide{
display:none
}

有没有一种方法可以使用react-select 获得多行标签或为一个选项提供两个标签？

我通过值和标签传递选择组件选项

value: someValue,
label: "This is my first value - Name: Value 1 \n Foo Bar Date Insert 
Today's Date Here"

我尝试插入换行符，但文本仍保留在选择输入中的一行上。我正在寻找一种解决方案，每个选项都有两行。

我正在使用反应选择库为我的下拉可搜索组件创建一个测试。在自定义该组件时，
我无法data-testid向组件添加属性，因为它是在反应选择文档中定义的。Option

该data-testid属性不会显示在Option元素的 DOM 中。

选项组件

import Select, { components } from 'react-select';

const CustomOption = (props: OptionProps<SearchDropdownOption, false>) => (
  <components.Option {...props} data-testid="test-id" />
);

例如，我成功使用了DOM 中显示Input的下拉列表和属性的搜索版本组件：data-testid

输入组件

import Select, { components } from 'react-select';

const CustomInput = (props: InputProps<SearchDropdownOption, false>) => (
  <components.Input {...props} data-testid="test-id" />
);

而不是在Select组件中使用它：

<Select<SearchDropdownOption, false>
  components={{
    Input: CustomInput,
    Option: CustomOption,
  }}
  isSearchable={isSearchable}
/>

我有一个使用反应选择的自定义组件。这使用了Createable Selectand 看起来像：

import CreatableSelect from "react-select/creatable";
import {
  ActionMeta,
  MultiValue,
  MultiValueGenericProps,
  OptionProps,
  StylesConfig,
  components,
} from "react-select";


type UserOption = {
  value: number;
  label: string;
  logo?: string;
};


type CustomUserInputProps = {
  userOptions: UserOption[];
  onChange: (
    newValue: MultiValue<UserOption>,
    actionMeta: ActionMeta<UserOption>
  ) => void;
  onBlur: ChangeEventHandler;
  value: UserOption[];
  name: string;
}


export function CustomUserInput ({
  userOptions,
  onChange,
  onBlur,
  value,
  name,
  disabled,
  isEdited,
}: CustomUserInputProps ) {
   ...
   return (
         <CreatableSelect
          options={userOptions}
          onChange={onChange}
          placeholder={""}
          isMulti={true}
          onBlur={onBlur}
          value={value}
          name={name}
          components={{ …