标签: react-select

我的守则

<Creatable
   name="productType"=
   options = {this.state.productOptions}
   value = {this.state.productType}
   onNewOptionClick = {this.createProductType}
   onChange = {this.handleProductChange}  
 />

createProductType(option) {
    var options = this.state.productOptions;
    var label = option.label.charAt(0).toUpperCase() + option.label.slice(1);
    options.push({
        label: label,
        value: option.value
    })
    this.setState({
        productOptions: options,
        productType: option.value
    })
}

在我点击新选项之前:

点击新选项后:

单击新选项后所需的UI状态:

是不是要将此作为问题发布在Github上,因为我不确定使用onNewOptionClick的确切方法.

是否可以让react-select回退到移动设备上的本机选择？

实际上，为什么这不是默认行为？

如何传递选项以在选择中预览图像。我有国家选择，我想预览国旗。在这种情况下，我不知道如何传递“选项”对象。

    var countries = 
    [
          {value: 'me', label: 'Montenegro'},
          {value:'rs',label: 'Serbia' }
    ];

   <Select name={"nationality_" + passenger.passengerId}
           value={passenger.nationality}
           options={countries}/>   

我正在使用react-select并对其进行自定义，但没有找到执行此操作的选项。在设置样式时，是否可以使用一些解决方法使下拉菜单保持打开状态？

所以，我需要将 defaultValue 传递给启用多选的 react-select 组件。我已经尝试了所有我能想到的：字符串数组、对象数组、字符串等......似乎没有任何效果。

我也在使用 getOptionLabel 和 getOptionValue，它们可能是造成所有这些混乱的原因吗？

我正在为Async Select from苦苦挣扎react-select。我设法显示了一些 defaultOptions 并使用 promises 和loadOptionsprop对其选项进行异步获取。

我需要的是在单击时显示选项下拉列表时更新选项（解决承诺）。有没有办法执行相同的承诺onClick（即使在onChange）？

我正在使用react-select团队提供的以下代码笔https://codesandbox.io/s/7w4w9yyrmx?module=/example.js

感谢您的帮助！

我正在使用 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) => { …

我正在使用 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>

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