标签: react-select

我在我的项目中使用 react-select 2。每次用户选择一个选项时，输入值都会被清除，这会导致选项列表发生变化。
有没有办法保留输入值以便用户可以选择多个选项？这是我尝试过的：

<Select
    closeMenuOnSelect={false}
    blurInputOnSelect={false}
    isMulti
    loadOptions={this.resultProvider.bind(this)}
    inputValue={this.state.searchKey}
    onInputChange={this.handleInputChanged.bind(this)}
  />

handleInputChanged(input, reason) {
    if (reason.action === "set-value") {
        return;
    }
    this.setState({
        ...this.state,
        searchKey: input
    });
}

我创建了一个演示来演示这个问题：https : //codesandbox.io/s/345rp0m041

请注意，此问题仅发生在异步选择中。

感谢您的建议！

我在我的应用程序中使用了react-select来显示选择框。下面是我选择的代码。

<Select
       className="custom-form-control mb-2"
       name="organization_options"
       options={this.organizationOptions()}
       placeholder={false}
       onChange={this.handleChange.bind(this)}
       value={selectedValue === "" ? this.organizationOptions()[0] : selectedValue}
/>

以下是我在选择框中已有的选项

0: {value: "62", label: "Dfdf"}
1: {value: "128", label: "Dfdfdsf"}
2: {value: "151", label: "Fgfdgdfh"}
3: {value: "121", label: "Hhhfas"}
4: {value: "55", label: "My Sensor_56"}
5: {value: "13", label: "New Org"}
6: {value: "44", label: "Org 2"}
7: {value: "148", label: "Testing App"}

我有来自查询字符串的值，如 value="55"，如果该值存在，我想在选择框中显示所选值。

我尝试了 2 种不同的方式，如下面的代码所示，

1)

selectedValue='55'
defaultValue={this.organizationOptions().find(op => {
   return op.value === selectedValue
})}

2

defaultValue={{value: …

我正在尝试使用 React-Select 选项创建自定义选择。我希望我的搜索不在控制框中，而是在菜单中。我试过这个：

import React from "react";
import Select, { components } from "react-select";
import { colourOptions, groupedOptions } from "./docs/data";


const MenuList = props => {
  return (
    <components.MenuList {...props}>
      <components.Input {...props} />;
      {props.selectProps.inputValue.length > 1 ? props.children : ""}
    </components.MenuList>
  );
};
export default () => (
  <Select
    defaultValue={colourOptions[1]}
    options={groupedOptions}
    components={{ MenuList }}
  />
);

问题是我收到一条错误消息

Uncaught Invariant Violation: input is a void element tag and must neither have children nor use dangerouslySetInnerHTML

我猜反应选择components.Input是在input标签内渲染另一个 …

我正在使用 react-select ( https://react-select.com ) 并且我试图在 MenuList 本身（在顶部）中添加一个搜索输入，而不是从容器搜索的默认行为。

<Select
   ...
   components={{
      ...
      MenuList: (props: any) => {
         return (
            <components.MenuList {...props}>
               <div className="search-wrapper">
                  <input 
                     value={search}
                     onChange={searchChange}
                     placeholder="Search"/>
                </div>
                {props.children}
             </components.MenuList>
          );
       },
   }}
>
</Select>

它正在工作，我在菜单顶部得到了一个很好的输入：

但输入似乎被禁用。（在输入中添加 disabled=false 不会产生任何影响）

有什么想法吗？为什么会这样？实现此类功能的正确方法是什么？

使用 react-testing-library，我想测试一个在 React 中实现的表单。

该表单包含一个 react-select 类型的 React 组件。

有必要单击 react-select 组件中没有标签、没有文本等的部分（例如下拉箭头）。

通常，react-testing-library 执行此操作的方法是向相关项目添加“data-testid”属性。

我发现通过向 react-select 组件提供 'classNamePrefix' 属性，可以为 react-select 的每个部分提供一个 CSS 类属性。有没有办法对 data-testid 属性做同样的事情？

注意：我知道我可以提供 react-select 组件的自定义实现，但是让一个属性到位似乎有点矫枉过正。

React-Select with Formik 没有在 select 组件中加载选定的值，但我能够获取表单提交和验证的值也适用于 Yup

这是相同的代码和框演示 - 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 SelectForm extends Component {
  constructor(props) {
    super(props);
    this.state = {
      stateList: [],
      stateCity: "",
      selectedState: "",
      citiesToLoad: []
    };
  }

  handleState(opt) {
    console.log(opt.value);
    let citiesList = [];
    Object.keys(this.state.stateCity).forEach(key => {
      if (key === opt.value) {
        this.state.stateCity[key].map((cityName, j) => { …

我希望自定义多选以及我们创建显示所选选项的显示方式。

现在，选择了许多选项后，选择组件会占用某些 UI 的大量空间。见示例：

我想对输入中的选定选项使用开箱即用的芯片显示，但我只想显示几个选定的选项（例如最大 3/4），然后添加一个“徽章”计数未显示在输入值容器中的选定选项。被选中，但该选项是过去的允许显示的下拉列表中选定的输入应显示芯片的最大数量，而做节目的价值观芯片应该不会在我们的下拉列表中显示。

我已经通过使用自定义ValueContainer仅显示前几个芯片选择，然后添加了额外/“溢出”选择的计数来实现了其中的一部分。我不确定如何利用道具hideSelectedOptions来实现这一点，仅在达到我的最大值时才显示列表中的选定项目，而不显示所有项目，因为该道具采用布尔值。

这是我到目前为止所拥有的：https : //codesandbox.io/s/custom-react-select-sjtib

import React, { Component } from "react";
import Select, { components } from "react-select";
import { colourOptions } from "./docs/data";
import "./example.css";

class CustomSelect extends Component {
  state = {
    values: []
  };

  handleChange = values => {
    this.setState({ values });
  };

  render() {
    const { values } = this.state;
    return (
      <div>
        <Select
          hideSelectedOptions={values.length < 3 ? true …

我正在尝试在 react-select 组件选项上添加 fontawesome 图标和工具提示。下面的图片我正在努力实现

代码

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

const websiteFilterFiedsOptions = [
    {value: '', label: 'Search and select website activity'},
    {value: 'page_visited', label: 'Page Visited'},
    {value: 'form_submitted', label: 'Form Submitted'}
]

export default class Website extends Component { 

    constructor(props) {
        super(props);
        this.state = {
            selectedFilter: ''
        }
    }

    filterSelectedData = function(data) {

    }

    render() {
        return <div className="form-group">
                    <h6 className="website_filter"><b>Filters</b></h6>
                    <div className="location-search field-width filed_width_custom">
                        <Select
                            value={this.state.selectedFilter}
                            onChange={(e) => this.filterSelectedData(e)}
                            options={ websiteFilterFiedsOptions …

我正在使用 react select 创建选项下拉列表。我想访问下拉列表中的标签，但还想访问与数据相关的值。例如：

import Select from 'react-select'


let options = [
 {
 label: Small,
 change: -3
 },
 {
 label: Medium,
 change: 0
 }
]

<Select id={"options"} defaultValue={options[0]} options={options} />

let selectedChange = // How can I access the change property?
let selectedLabel = document.querySelector(`#options`).textContent // This is how I have been getting the proper label

<button onClick={console.log(selectedChange, selectedLabel)}></button>

我想通过将选项更改值添加到默认价格来更改项目的显示成本，但我只想在选择中显示标签。

我正在尝试使用react-select 创建一个选择元素，并为此使用Creatable 组件。

在我当前的实现中，它不会提示用户输入“创建”选项，如文档所示，它将 显示默认的“无选项”。

我也在使用redux-form库，但我不认为问题来自那里。

到目前为止，这是我的代码：

import Select from "react-select/creatable";
import React from "react";

const customFilter = (option, searchText) => {
  return option.data.searchfield.toLowerCase().includes(searchText.toLowerCase());
};

export default (props) => {
  const { input, options, placeholder } = props;

  const renderValue = (value) => {
    const val =
      value === "" ? null : options.find((obj) => obj.value === input.value);
    return val || "";
  };

  return (
    <Select
      value={renderValue(input.value)}
      name={input.name}
      onFocus={() => input.onFocus(input.value)}
      onChange={(value) => input.onChange(value.value)}
      onBlur={() => input.onBlur(input.value)} …